小程序实现自定义单选或多选

自定义单选多选按钮的实现

1、效果图

2、实现思路

（1）点击每个item前面的按钮（每次点击都要进行下列操作）

。进行图片的切换（已选 -> 未选 ， 未选 -> 已选 ）
。检查是否满足全选的条件（更改所有item的状态，包括全选按钮的状态）

（2）点击全选按钮

。更改所有item的选择状态，以及全选按钮的状态

3、代码

WXML

<view class="container">
  <block wx:for="{{infoArray}}" wx:key="item.id">
    <view class="con-wrapper">
      <image src="{{item.isSelect?choseImg:unchoseImg}}" class="se-img" bindtap="chooseTap"  data-index="{{index}}"></image>
      <view class="person">
        <image src="/images/avatar.jpg"></image>
        <view class="info">
          <text class="name">{{item.name}}</text>
          <text class="address">{{item.address}}</text>
        </view>
        <view class="tag">
          <text>收藏</text>
        </view>
      </view>
    </view>
  </block>
  <view class="all">
    <view class="left" bindtap="allSelect">
      <image src="{{allSelect?choseImg:unchoseImg}}" class="se-img"></image>
      <text>全选</text>
    </view>
    <view class="right">
      <view class="delete btn">全部删除</view>
      <view class="collect btn">全部收藏</view>
    </view>
  </view>
</view>

JS

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
   infoArray:[
     {"id":1,"imgUrl":"/images/avatar.jpg","name":"小气球","address":"重庆市渝中区解放碑"},
     {"id":2,"imgUrl":"/images/avatar.jpg","name":"小西瓜","address":"广州市天河区"},
     {"id":3,"imgUrl":"/images/avatar.jpg","name":"小熊猫","address":"四川省成都市武侯区"},
     {"id":4,"imgUrl":"/images/avatar.jpg","name":"小狐狸","address":"北京市朝阳区"},
   ],
   allSelect:false,
   choseImg:'/images/chose.png',
   unchoseImg:'/images/chose@dis.png',
  },

  onLoad: function () {
    this.addTag();
  },

  addTag(){//若是从服务器取来的数据，则需增加一个变量isSelect用来判断是否选中
    for(var i = 0; i < this.data.infoArray.length; i++){
      this.data.infoArray[i].isSelect = false;
    }
  },

  chooseTap(e){//单击选中或取消按钮
    let index = e.currentTarget.dataset.index;  //当前点击列表的index
    let infoArray = this.data.infoArray;
    infoArray[index].isSelect = !infoArray[index].isSelect;  //选中变为未选中，未选中变为选中
    this.checkAllSelect();
    this.setData({
      infoArray:infoArray
    })
  },


  allSelect(){//全选或者取消全选
    let infoArray =  this.data.infoArray;
    let allSelect = this.data.allSelect;
    if(allSelect){
      for(var i = 0; i < infoArray.length; i++){ 
        infoArray[i].isSelect = false;
      }
    }
    else{
      for(var i = 0; i < infoArray.length; i++){  
        infoArray[i].isSelect = true;
      }
    }
    allSelect = !allSelect
    this.setData({
      infoArray,
      allSelect
    })
  },

  checkAllSelect(){//判断是否是全选
    let infoArray =  this.data.infoArray;
    let temp =[];  //用一个临时数组来存放已经选中的列表的下标
    let allSelect = this.data.allSelect;
    for(var i = 0; i < infoArray.length; i++){
      if(infoArray[i].isSelect == true){
        temp.push(i);
      }
    }
    temp.length === infoArray.length ? allSelect = true : allSelect = false
    
    this.setData({
      allSelect
    })
  },

 
})

WXSS

page {
  background: #F5F5F5;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 100rpx;
}

.con-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
  position: relative;
}

.se-img {
  width: 34rpx;
  height: 34rpx;
  margin-right: 20rpx;
}

.person {
  width: 616rpx;
  height: 180rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #ffffff;
}

.person image {
  width: 100rpx;
  height: 100rpx;
  margin: 0 30rpx 0 40rpx;
}

.info {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 32rpx;
  color: #333333;
  font-weight: 500;
  margin-bottom: 17rpx;
}

.address {
  font-size: 24rpx;
  color: #999999;
}

.tag {
  position: absolute;
  right: 30rpx;
  top: 16rpx;
  width: 110rpx;
  height: 48rpx;
  line-height: 48rpx;
  background: #6B7AF8;
  color: #ffffff;
  font-size: 24rpx;
  text-align: center;
}


.all {
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 0 30rpx;
  height: 98rpx;
  border-top: 1px solid #E1E1E1;
  background: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.left {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 28rpx;
  color: #333333;
}

.right {
  display: flex;
  flex-direction: row;
}

.btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 35rpx;
  font-size: 28rpx;
  text-align: center;

}

.delete {
  color: #666666;
  border: 1px solid #aaaaaa;
}

.collect {
  color: #6B7AF8;
  border: 1px solid #6B7AF8;
  margin-left: 30rpx;
}