微信小程序开发笔记(十)--多选标签效果

1.wxml：

<block wx:for='{{itemList}}' wx:key="id">
    <view class="{{item.isSelected?'_on':''}}" bindtap='itemSelected' data-index='{{index}}'><text>{{item.name}}</text></view>
</block>

2.wxss：

._on {
  color: #1DB1CF;
  border: 1rpx solid #1DB1CF;
}

3.wxjs：

Page({
  data: {
    itemList: [{
        id: 1,
        name: '五险一金',
        isSelected: false,
      },
      {
        id: 2,
        name: '包吃包住',
        isSelected: false,
      },
      {
        id: 3,
        name: '朝九晚五',
        isSelected: false,
      },
    ]
  },

  itemSelected: function (e) {
    let index = e.currentTarget.dataset.index;
    let item = this.data.itemList[index];
    item.isSelected = !item.isSelected;
    this.setData({
      itemList: this.data.itemList,
    });
  },
})

微信小程序开发笔记(十)--多选标签效果

推荐阅读