微信小程序开发中怎样实现电商购物车逻辑

给大家分享一个关于小程序购物车全选的逻辑处理，这个还是要感谢我的老妹教导我，一个开发人员做东西一定要严谨，不管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，再赋值。

经过这几步操作之后就解决了全选这方面的所有逻辑

相信看了本文案例你已经掌握了方法，更多精彩请关注知企PROSAAS其它相关文章！

推荐阅读：

微信小程序开发switchTab如何使用

微信小程序开发怎样编写代码

以上就是微信小程序开发中怎样实现电商购物车逻辑的详细内容，更多请关注知企PROSAAS其它相关文章！