首先说一下场景:我所循环的数据是对象数组,设置了一个属性当作标记,通过这个标记的值判断是否给改元素添加样式
wxml:
<view>
<view wx:for="{{list}}" wx:key="num" class="list" >
<text bindtap='changColor' data-index='{{index}}' class='{{item.check?"text-active":""}}' >| {{item.message}}</text>
</view>
</view>
js:
/*
这里获取list是一个数组对象
tomorrow: [
{
thing: '吃饭',
check: false
},
{
thing: '睡觉',
check: false
},
{
thing: '打豆豆',
check: false
}
]
*/
changColor: function (e) {
let index = e.currentTarget.dataset.index
let arrs = this.data.list;
if (arrs[index].check == false) {
arrs[index].check = true;
} else {
arrs[index].check = false;
}
this.setData({
list: arrs
})
},
核心在于修改对象属性check的值,然后在元素渲染是根据值进行样式的添加