微信小程序模拟多选效果

1、wxml中

<!-- 推广种类 -->
 <view class="release_subtitle"> 推广种类<text>（可多选）</text></view>
 <view class="public_options">
   <text wx:for="{{promotionTypeList}}" wx:key="index" class="{{item.isSelected == true ?'publicOptionActive':''}}" bindtap="selectedPromotionType" data-id="{{item.id}}">{{item.text}}</text>
 </view>

2、js中

 selectedPromotionType: function (val) {
   const { id } = val.target.dataset //获取页面中通过data-id="{{item.id}}"传过来的值
   //遍历data中定义的promotionTypeList数组，找到当前点击的那项 val.id遍历项的id    id是传参过来的id
   let obj = this.data.promotionTypeList.find(val => val.id == id) 
   obj.isSelected = !obj.isSelected //找到后取反  本来是选中的变成不选中，本来不选中的选中
   this.setData({
     promotionTypeList: this.data.promotionTypeList  //把数据重新渲染到promotionTypeList中，即渲染到页面上
   })
 },

3、data中数据格式

//推广种类
promotionTypeList: [
  {
    id: 0,
    text: "种草",
    isSelected: false,//是否选择 false：否， true：是
  }, {
    id: 1,
    text: "探店",
    isSelected: true,//是否选择 false：否， true：是
  }, {
    id: 2,
    text: "带货",
    isSelected: false,//是否选择 false：否， true：是
  }, {
    id: 3,
    text: "广告",
    isSelected: false,//是否选择 false：否， true：是
  }
],