随便搜了一下发现没有什么人弄这种,刚好自己在做,顺便发出来了,感觉还有改进空间,大家可以参考一下
直接上代码:
页面部分:
<view class="all {{isAll == true ? 'classActive' : ''}}" bindtap="checkAll">全部</view>
<view class="others {{item.isCheck == true ? 'classActive' : ''}}" wx:for="{{classifyList}}" wx:key="index" data-index="{{index}}" bindtap="isCheck">
{{item.name}}
</view>
js代码:
// 全选按钮
data: {
isAll: false,
classifyList: []
},
checkAll: function() {
var that = this;
console.log(that.data.isAll);
var classifyList = that.data.classifyList;
// console.log(classifyList);
if(that.data.isAll) {
for(var i = 0; i < that.data.classifyList.length; i++) {
classifyList[i].isCheck = false
}
that.setData({
classifyList: classifyList,
isAll: false
})
} else {
for(var i = 0; i < that.data.classifyList.length; i++) {
classifyList[i].isCheck = true
}
that.setData({
classifyList: classifyList,
isAll: true
})
}
},
// 单选点击功能并排查全选
isCheck: function(e) {
var that = this;
var classifyList = that.data.classifyList;
var isAll = that.data.isAll;
console.log(e.currentTarget.dataset.index);
var selectIndex = e.currentTarget.dataset.index;
if(that.data.classifyList[selectIndex].isCheck) {
classifyList[selectIndex].isCheck = false;
isAll = false;
} else {
classifyList[selectIndex].isCheck = true;
var flag = true;
for(var i = 0; i < classifyList.length; i++) {
if(!classifyList[i].isCheck) {
flag = false;
}
isAll = flag;
}
}
that.setData({
classifyList: classifyList,
isAll: isAll
})
}
命名可能有点问题,直接拿去用可能会报错,数据使用云函数从云数据库里拿的,大家参考一下逻辑就好了