微信小程序点击列表添加 去除属性

Posted 2021-02-06 yan-captain

首先说一下场景：我所循环的数据是对象数组，设置了一个属性当作标记，通过这个标记的值判断是否给改元素添加样式

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的值，然后在元素渲染是根据值进行样式的添加