微信小程序多选实现

最新推荐文章于 2025-01-16 17:18:46 发布

原创最新推荐文章于 2025-01-16 17:18:46 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

微信小程序多选实现

wxml:
 <ul class="ul-ls">
                <li wx:for="{{infoList}}" wx:key='this' data-index='{{index}}'
                    class='li-con {{item.isSelected? "onlist" : ""}}' data-index="{{index}}"
                    data-id="{{item}}"  bindtap="changItem">
                    {{ item.name }}
                </li>
            </ul>

js:

infoList: [{
        id: 1,
        name: '校招',
        isSelected: false,
      },
      {
        id: 2,
        name: '社招',
        isSelected: false,
      },
      {
        id: 3,
        name: '实习',
        isSelected: false,
      },
      {
        id: 4,
        name: '兼职',
        isSelected: false,
      },
    ],
   changItem(e) {
      var index = e.currentTarget.dataset.index;
      var item = this.data.infoList[index];
      item.isSelected = !item.isSelected;
      this.setData({
        infoList: this.data.infoList,
      });
    }