微信小程序自定义checkbox选择用户显示头像

个人微信小程序开发笔记，转载告知

先上效果

小程序checkbox选择用户显示头像.gif

HTML

我引用了vant toast，如引入错误自行修改

<scroll-view class="perBox" bindscroll="">
    <view class="perBox-top">
        <view class="perBox-top-b1">
            <image class="seleImg" mode="aspectFit" lazy-load="false" wx:for="{{seleArr}}" src="{{item.avatar}}" wx:key="index" style="transform:translateX({{-index*8}}rpx)"></image>
        </view>
        <view class="perBox-top-b2">已选{{seleArr.length}}人</view>
        <view class="perBox-top-b3" bindtap="allseleFun">全选</view>
    </view>
    <view class="perBox-list">
        <checkbox-group class="perCBox" bindchange="selectedFun">
            <label class="perCBox-list" wx:for="{{members}}" wx:key="index">
                <checkbox value="{{item.id}}" checked="{{item.checked}}"/>
                <view class="perl">
                    <image class="perlImg" src="{{item.avatar}}" mode="aspectFit" lazy-load="false"></image>
                    <view class="perl-box">
                        <text class="sty1tt">{{item.nickname}}</text>
                        <text class="sty2tt">{{item.realname}}</text>
                    </view>
                </view>
            </label>
        </checkbox-group>
    </view>
    <view class="perBox-btn" bindtap="selecTem">选择模板</view>
</scroll-view>
<van-toast id="van-toast" />  // 我引用了vant toast，如引入错误自行修改

wxss

checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    background: #FF6E7D;
    color: #fff;
    border: 1px solid #FF6E7D;
}

button::after {
    border: none;
}

.sty1tt {
    font-size: 16px;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
}

.sty2tt {
    font-size: 12px;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
}

.perBox {
    width: 100%;
    height: 100%;
}

.perBox-btn {
    position: fixed;
    width: 560rpx;
    height: 88rpx;
    line-height: 88rpx;
    bottom: 60rpx;
    left: calc(50% - 280rpx);
    background: rgba(255, 110, 125, 1);
    box-shadow: 2px 3px 10px 0px rgba(255, 110, 125, 0.12);
    border-radius: 22px;
    font-size: 36rpx;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    text-align: center;
}

.perBox-top {
    width: 100%;
    height: 120rpx;
    background: #f2f2f2;
    position: relative;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 24rpx;
}

.perBox-top-b1 {
    min-width: 84rpx;
    height: 100%;
    display: flex;
    align-items: center;
}

.seleImg {
    width: 60rpx;
    height: 60rpx;
    background: #fff;
    border-radius: 50%;
    position: relative;
    box-shadow: 0px 2px 5px 0px rgba(65, 3, 39, 0.05);
}

.perBox-top-b2 {
    flex: 1;
    font-size: 24rpx;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.3);
}

.perBox-top-b3 {
    position: absolute;
    right: 24rpx;
    top: 0;
    height: 120rpx;
    line-height: 120rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: rgba(255, 110, 125, 1);
}

.perBox-list {
    width: 100%;
}

.perCBox {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.perCBox-list {
    width: 100%;
    height: 120rpx;
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    box-sizing: border-box;
}

.perl {
    flex: 1;
    display: flex;
    height: 100%;
    align-items: center;
}

.perlImg {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background: #f2f2f2;
    margin: 0 20rpx;
    box-shadow: 0px 2px 5px 0px rgba(65, 3, 39, 0.05);
}

.perl-box {
    flex: 1;
    border-bottom: #f2f2f2 1rpx solid;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

JS

  data: {
    seleArr: [], // 选中的用户
    members: [], // 获取到的用户数据
  },
  // 全选
  allseleFun(){
    var that = this;
    let members = that.data.members // 原数组
    for (let i = 0; i < members.length; i++) {
      members[i].checked = true
    }
    that.setData({
      members: members,
      seleArr: members
    })
  },
  // 单个选中
  selectedFun(e){
    let that = this
    let dArr = e.detail.value // 选中的数组
    console.log(dArr)
    if (dArr.length == 0){return that.setData({seleArr: []})}
    let members = this.data.members // 原数组
    let seleArr = []
    for (let i = 0; i < dArr.length; i++) {
      for (let y = 0; y < members.length; y++){
        if(members[y].id == dArr[i]){
          seleArr.push(members[y])
          that.setData({
            seleArr: seleArr
          })
        }
      }
    }
    console.log(that.data.seleArr)
  },