微信小程序---购物车功能（选中与取消选中，全选与取消全选）

微信小程序—购物车功能（选中与取消选中，全选与取消全选）

html

<view class="box">
  <view class="container">
    <view class="hopeList" wx:for="{{ListInfo}}" wx:key="index">
      <image  class="icos1"  wx:if="{{item.avatar == ''}}"  src="../../images/arv.png"></image>
      <image  class="icos1" wx:else src="{{item.avatar}}"></image>    
      <view class="fonts fontsh">{{item.name}}</view>
      <image class="icos2" data-id="{{item.id}}" bindtap="isClick" src="{{item.isHidden == true?'../../images/yuan1.png':'../../images/yuan.png'}}"></image>
    </view>
  </view>
  <view class="butt">
    <image class="icos3" data-id="{{item.id}}" bindtap="selAll" src="{{selectAll == true?'../../images/yuan1.png':'../../images/yuan.png'}}"></image>
    <view class="fonts fontsh1">全选</view>
    <view class="btns2" bindtap="chosed">确定</view>
  </view>
</view>

js

  data: {
    isHidden: true,
    idList: [],
    ListInfo: [],
    selectAll: false,
    idAll:[],//上个页面传过来的选中的用户id
  },
  // 批量选择
  isClick(e) {
    var that = this
    var ListInfo = that.data.ListInfo //信息数组
    var ids = e.currentTarget.dataset.id//点击获取的id
    var idList = that.data.idList//id数组
    var idAll = that.data.idAll//上个页面获取的id 已经选择过的id
    for (var i = 0; i < ListInfo.length; i++) {
      if (ids == ListInfo[i].id) { //筛选id
        var ListInfo = that.data.ListInfo
        if (ListInfo[i].isHidden == 1) {
          ListInfo[i].isHidden = 0
          idList.splice(ListInfo.indexOf(ids), 1) //取消选中后 id去一
          idAll.splice(ListInfo.indexOf(ids), 1)
          that.setData({ //局部刷新
            ListInfo,
            idList: idList,
            idAll:idAll
          })
          if (ListInfo.length > idList.length) {//判断是否全选 (不全选)
            that.setData({
              selectAll: false
            })
          }
        } else {
          ListInfo[i].isHidden = 1
          idList = idList.concat(ListInfo[i].id).concat(idAll)//取消选中后 id增加一
          var idList1 = idList.filter(function (element, index, self) { //去重
            return self.indexOf(element) === index;
          });
          that.setData({
            ListInfo,
            idList: idList1
          })
          if (ListInfo.length <= idList.length) {//判断是否全选 (全选)
            that.setData({
              selectAll: true
            })
          }
        }
      }
    }
  },

  // 全选与反选
  selAll() {
    var that = this;
    var ListInfo = that.data.ListInfo//获取的信息数组
    var idList = [] //id数组
    var idAll = [] //上个页面返回已选择过的id
    var selectAll = that.data.selectAll
    for (let i = 0; i < ListInfo.length; i++) {
      if (!selectAll) {
        ListInfo[i].isHidden = 1
        idList = idList.concat(ListInfo[i].id) // 组成id数组
      } else {      
        ListInfo[i].isHidden = 0
        idList.splice(ListInfo.indexOf(ListInfo[i].id), 1)
        idAll.splice(ListInfo.indexOf(ListInfo[i].id), 1)
      }
    }
    that.setData({
      ListInfo: that.data.ListInfo,
      selectAll: !selectAll,
      idList: idList,
      idAll:idAll
    })
  },
  // 选择确定
  chosed() {
    var that = this
    var isidList = that.data.idList
    if(isidList == ''){ // 判断页面是否之前选择过
      var idList = that.data.idAll
    }else{
      var idList = that.data.idList
    }
    var pages = getCurrentPages();   //当前页面
    var prevPage = pages[pages.length - 2];   //上一页面
    prevPage.setData({//为上一个页面赋值
      idAll: idList,
    });
    if (idList.length <= 0) {
      wx.showToast({
        title: '请选择人员哦！',
        icon: 'none'
      })
    } else {
      wx.navigateBack({
        delta: 1
      })
    }
  },

css

.hopeList {
  width: 100%;
  display: flex;
  margin-bottom: 40rpx;
}

.icos1 {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 40rpx;
}

.fontsh {
  width: 70%;
  line-height: 120rpx;
  text-align: left;
}

.icos2 {
  width: 40rpx;
  height: 40rpx;
  margin: 42rpx 0 0 0;
}

.butt {
  width: 100%;
  box-shadow: 0px -2px 6px 0px rgba(118, 196, 244, 0.4);
  border: 1px solid rgba(255, 255, 255, 100);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 32rpx 40rpx;
  box-sizing: border-box;
  display: flex;
}

.icos3 {
  width: 40rpx;
  height: 40rpx;
  margin: 20rpx 0 0 0;
}

.fontsh1 {
  margin-top: 20rpx;
  margin-left: 20rpx;
}

.btns2 {
  width: 470rpx;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 100rpx;
  background-color: rgba(9, 131, 246, 100);
  color: rgba(255, 255, 255, 100);
  font-size: 14px;
  text-align: center;
  box-shadow: 0px 4px 10px 0px rgba(118, 196, 244, 0.4);
  border: 1px solid rgba(255, 255, 255, 100);
  margin-left:75rpx;
}