小程序 --- 实现多选功能

示例

 

wxml

<view class="team_info_item" wx:for="{{list}}" wx:key="id" data-index="{{index}}" bindtap="select">
    <view class="item_icon">
        <image mode="widthFix" src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=412796477,2371228780&fm=111&gp=0.jpg"></image>
    </view>
    <view class="team_content">
        <view>
            <view class="team_name">{{item.team_name}}</view>
            <view class="team_leader">队长：{{item.team_leader}}</view>
        </view>
        <view class="tick">
            <image hidden="{{item.checked}}" mode="widthFix" src="../../img/tick.png"></image>
        </view>
    </view>
</view>

 

wxss

.team_info_item {
    display: flex;
    padding-left: 52rpx;
    padding-bottom: 20rpx;
}

.team_info_item .item_icon image {
    width: 90rpx;
    border-radius: 50%;
}

.team_info_item .team_content {
    display: flex;
    justify-content: space-between;
    padding-left: 28rpx;
    padding-right: 60rpx;
    width: 100%;
    color: #4a4a4a;

}

.team_info_item .team_content .team_name {
    font-size: 32rpx;
    font-weight: 600rpx;
    font-family: "SourceHanSansCN-Medium";
}

.team_info_item .team_content .team_leader {
    font-size: 28rpx;
    font-family: "SourceHanSansCN-Normal";

}

.team_info_item .team_content .tick {
    display: flex;
    align-items: center;
    width: 45rpx;
}

.team_info_item .team_content .tick image {
    width: 100%;
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

js

Page({
  data: {
    list: [{
      team_name: '复仇者联盟',
      team_leader: '美国队长',
      checked: true
    },
    {
      team_name: '神奇四侠',
      team_leader: '鸣人',
      checked: true
    },
    {
      team_name: '航海王',
      team_leader: '海贼王',
      checked: true
    }]
  },

  /* 
    需求：
    + 实现多个元素被选中
      - 获取被点击元素的 下标
      - 修改flag
  */

  select: function (e) {
    // 获取被点击元素的下标
    const index = e.currentTarget.dataset.index
    // 复制一份 list 数组
    const list = this.data.list
    // 修改 checked 的值 取反
    list[index].checked = !list[index].checked
    // 修改 data 中的 list
    this.setData({
      list
    })
  }
})