给大家分享一个关于小程序购物车全选的逻辑处理，这个还是要感谢我的老妹教导我，一个开发人员做东西一定要严谨，不管UI设计的有多丑，该有的逻辑你一定要做到。
首先我们要做到的就是，当用户点击第三个商品时 全选按钮自动选中，或者全选之后，只要有一个商品不选中，全选按钮也得变动。先给大家看一下代码：
你要在页面onload时候定义一些你需要每次渲染的数据
data: {
likeList: [],
carts:[], // 购物车列表
hasList:false, // 列表是否有数据
//totalPrice:0, // 总价，初始为0
selectAllStatus:false, // 全选状态，默认全选,
goodsNums:0,
allclick:[]
}
每件商品单个选中的的逻辑处理
selectList(e) {
const index = e.currentTarget.dataset.index;// 获取每一个点击的购物车ID let carts = this.data.carts,
selected = carts[index].select,
all = this.data.allclick;
carts[index].select = !selected;
carts[index].select == true ? all.push(index):all.splice(index,1);
all.length == carts.length ?
this.setData({
selectAllStatus: true}):this.setData({
selectAllStatus: false});
this.getTotalPrice();
},
登录后复制
登录后复制
-
上面的代码，先做的就是单选的页面渲染效果。判断部分的代码就是最主要的处理全选逻辑的一步。相信你看到这里也注意到我在data里定义了一个allclick的空数组，然后就是接下来的逻辑：
-
按钮选中时取出对应item的角标放到新的arr里，这里因为我之前结算的逻辑已经搞好了，我就随便往数组里push数据，但其实可以作为对应商品的更重要的一些数据处理。
-
按钮不选中是从新的arr里找到这个item对应下标的数据移除
-
完成上面两步处理之后，每次按钮状态发生变化的时候判断arr的长度和cart的长度。
这就是我的处理，也可循环，实现的方式有很多，只是拿出来让没有接触过的小伙伴做个参考～
data: {
likeList: [],
carts:[], // 购物车列表
hasList:false, // 列表是否有数据
//totalPrice:0, // 总价，初始为0
selectAllStatus:false, // 全选状态，默认全选,
goodsNums:0,
allclick:[]
}
每件商品单个选中的的逻辑处理
selectList(e) {
const index = e.currentTarget.dataset.index;// 获取每一个点击的购物车ID let carts = this.data.carts,
selected = carts[index].select,
all = this.data.allclick;
carts[index].select = !selected;
carts[index].select == true ? all.push(index):all.splice(index,1);
all.length == carts.length ?
this.setData({
selectAllStatus: true}):this.setData({
selectAllStatus: false});
this.getTotalPrice();
},
登录后复制
登录后复制
-
这段代码也还是先处理全选的状态，然后就是关联状态的处理，
-
当全选没有勾选的时候全部改变商品信息里的按钮为false，直接清空allclick数组。
-
当全选勾选的时候全部改变商品信息里的按钮为true，先清空，接着重新push，再赋值。
经过这几步操作之后就解决了全选这方面的所有逻辑
相信看了本文案例你已经掌握了方法，更多精彩请关注有卡有网。
