• QQ
  • nahooten@sina.com
  • 常州市九洲新世界花苑15-2

微信开发

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

原创内容,转载请注明原文网址:http://homeqin.cn/a/wenzhangboke/jishutiandi/weixinkaifa/2019/0211/387.html

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


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

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是一个数组对象
  huantian: [
    {
      thing: '手游',
      check: false
    },
    {
      thing: '微信',
      check: false
    },
    { 
      thing: 'App',
      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的值,然后在元素渲染是根据值进行样式的添加手游开发



上篇:上一篇:微信小程序如何调用后台service的简单记录
下篇:下一篇:常州微信小程序开发-锚点定位