微信小程序默认实现首选变色效果

渲染：

在这里，默认情况下，第一个选择是点击每个不会改变的样式。它是根据索引实现的

wxml:

Page类有三种用途的操作

view class=' box ' view class=' box-container ' wx : for=' { { list } } ' wx : key=' list ' view class=' { { index==idx？_ left ' : ' left ' } } ' bind tap=' GoIndex '数据-索引=' { { index } } ' { { item . num } }/view/view wxss:

_左蓝左黑。box { width : 100%；height: autoborder-top: 1px实心# efefef}.箱式容器{宽度：90；display: flex高度： 100 rpx；align-items:居中；border-bottom: 1px实心# efefef}.左{ margin-left : 40 rpx；font-size : 26rpx；}._ left { margin-left : 40 rpx；font-size : 26rpx；color: # 14a1fd}js:定义一个idx:0，默认情况下获取每个索引。

/* * *第*页的初始数据/data : { list :[{'num' : '我是第一个' }，{'num': '我是第二个' }，{'num ' : '我是第三个' }，{ ' num '。{'num': '我是第五' }，{'num': '我是第六' }，{'num': '我是第七' }，{'num': '我是第八' }，{'num': '。idx : 0 }，goIndex(e){ let index=e . currenttarget . dataset . index；//console.log ('every index '，index) }，/** *生命周期函数-监控页面加载*/onload:函数(选项){}，如果要实现点击变色，

如图所示：

单击第二个，第二个变成蓝色，其余变成黑色

单击第三个，第三个，变成蓝色，其余变成黑色.给idx一个值

goIndex(e){ let index=e . CurrentTarget . dataset . index；//console.log ('every index '，index)this . setdata({ idx : index })}，summary

以上是边肖推出的微信小程序，默认实现第一个变色效果。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！