2022-01-05 工作记录--Wechat applet-实现点击全选按钮，实现内容的全选

Wechat applet-实现点击多选按钮，实现内容的全选

这里要分为三步：

第一步、 实现点击全选按钮时，按钮的样式切换

【可参考我的另外一篇博客】

第二步、 让内容自身实现可多选

【可参考我的另外一篇博客】

第三步、 点击全选按钮，实现内容的全选

分析：当点击全选按钮时，让内容里的所有学员的属性isSelect （自定义，详情可看第二步）都为true；当再次点击时，又让内容里的所有学员的属性isSelect （自定义，详情可看第二步）都为false，依次循环。

But

这里我们会遇见一个问题，那就是：当我们先选择一个或几个学员后，再点击全选按钮，就会出现 原先被选择的那些学员变成未被选中了；或者 当我们点击全选按钮后，再次去选择一个或多个学员时，会发现不能点击了。。。

这个该怎么解决呢？

解决的思维方式：当我们点击全选按钮时，分析 用来判断全选按钮是否点击的属性isSelectAll （自定义，详情可看第一步） 为true还是false。

1. isSelectAll 为true时，让 判断学员是否选中的属性isSelect （自定义，详情可看第二步）都为true；
2. isSelectAll 为false时，让 判断学员是否选中的属性isSelect （自定义，详情可看第二步）都为false。

那么，在第一步和第二步的基础上，就可以上代码了：

js：【重点】

Page({

  /**
   * 页面的初始数据
   */
  data: {
    studentsDetails: [{isSelect:false},{isSelect:false},{isSelect:false},{isSelect:false},{isSelect:false},{isSelect:false},{isSelect:false},{isSelect:false},{isSelect:false}], // 弹出层-打卡的学员
    isSelectAll: false, // 弹出层-是否点击全选
  },

  // 弹出层-点击全选
  select_all() {

    // 【对应目录里的第一步】实现点击全选按钮时，样式切换
    this.setData({
      isSelectAll: !this.data.isSelectAll,
    })

    // 实现点击全选按钮与单击学员时不冲突，建立正确联系
    this.data.studentsDetails.map((item,index) => {
      // 当 判断全选按钮是否点击的属性isSelectAll 为false时，让 判断学员是否选中的属性isSelect 都为false；反之同理
      if(this.data.isSelectAll == false) {
        this.setData({
        	// `studentsDetails[${index}].isSelect`是es6的写法
        	// 注意：这儿必须要加中括号，因为对象的属性（必须是字符串）为变量时，必须要加中括号，不然会报错滴哟
          [`studentsDetails[${index}].isSelect`]: false
        })
      } else {
        this.setData({
          [`studentsDetails[${index}].isSelect`]: true
        })
      }
    })
    
  },

})

wxml：

<!-- 选中学员打卡弹出层 -->
  <van-popup show="{{ show }}" bind:close="onClose"
    custom-style="width:90%;height:820rpx;background-color: #F6F6F6;box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);border-radius: 24rpx;">
    <view class="punchCard_popup">
      <view class="paddingSixteen">
        <view class="header">
          <text>选择打卡的学员</text>
          <van-icon name="cross" custom-style="position:absolute;right:0;bottom:0;font-weight:bold;font-size:40rpx" bindtap="onClose" />
        </view>
      </view>
      <view class="paddingSixteen">
        <view class="outer-container">
          <view class="inner-container">
            <view class="students">
            
			<!-- 第一个知识点：内容-全部学员 -->
              <view class="student" wx:for="{{studentsDetails}}" wx:key="index" data-index="{{index}}" bindtap="clickStudent">
                <image src="" class="{{item.isSelect ? 'selectedImg' : ''}}"></image>
                <view class="small_text textAlign {{item.isSelect ? 'change_textColor' : ''}}">赵玉田</view>
              </view>

            </view>
          </view>
        </view>
      </view>
      <view class="footer">
      
      <!-- 第二个知识点：全选按钮 -->
        <view class="selectAll" bindtap="select_all">全选<text class="hollow_circle {{isSelectAll?'solid_round':''}}"></text></view>
        
        <view bindtap="confirmCard">确认打卡</view>
        
      </view>
    </view>
  </van-popup>