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

发布时间：2020-12-14 19:24:53 所属栏目：资源来源：网络整理

导读：首先说一下场景：我所循环的数据是对象数组，设置了一个属性当作标记，通过这个标记的值判断是否给改元素添加样式 wxml： view view wx:for ="{{list}}" wx:key ="num" class ="list" text bindtap ='changColor' data-index ='{{index}}' class ='{{item.ch

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

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>
>

js：

复制代码

/*
　　这里获取list是一个数组对象

　　tomorrow: [

　　　　{

　　　　　　thing: '吃饭',

　　　　　　check: false

　　　　{

　　　　　　thing: '睡觉',

　　　　{　

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

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

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