Wechat applet-实现点击多选按钮,实现内容的全选
这里要分为三步:
第一步、 实现点击全选按钮时,按钮的样式切换
【可参考我的另外一篇博客】
第二步、 让内容自身实现可多选
【可参考我的另外一篇博客】
第三步、 点击全选按钮,实现内容的全选
分析:当点击全选按钮时,让内容里的所有学员的属性isSelect
(自定义,详情可看第二步)都为true
;当再次点击时,又让内容里的所有学员的属性isSelect
(自定义,详情可看第二步)都为false
,依次循环。
But
这里我们会遇见一个问题,那就是:当我们先选择一个或几个学员后,再点击全选按钮,就会出现 原先被选择的那些学员变成未被选中了;或者 当我们点击全选按钮后,再次去选择一个或多个学员时,会发现不能点击了。。。
这个该怎么解决呢?
解决的思维方式:当我们点击全选按钮时,分析 用来判断全选按钮是否点击的属性isSelectAll
(自定义,详情可看第一步) 为true
还是false
。
isSelectAll
为true
时,让 判断学员是否选中的属性isSelect
(自定义,详情可看第二步)都为true
;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>