### [微信小程序开发中怎样实现电商购物车逻辑](https://www.prosaas.cn/article/17496)

**Published:** 2018-06-05T03:51:20

**Author:** 5201314

**Excerpt:** 给大家分享一个关于小程序购物车全选的逻辑处理，这个还是要感谢我的老妹教导我，一个开发人员做东西一定要严谨，不管…

给大家分享一个关于小程序购物车全选的逻辑处理，这个还是要感谢我的老妹教导我，一个开发人员做东西一定要严谨，不管UI设计的有多丑，该有的逻辑你一定要做到。

![](https://user-gold-cdn.xitu.io/2018/5/29/163aa02a3b1fbc66?imageView2/0/w/1280/h/960/format/webp/ignore-error/1)

首先我们要做到的就是，当用户点击第三个商品时 全选按钮自动选中，或者全选之后，只要有一个商品不选中，全选按钮也得变动。先给大家看一下代码：

你要在页面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其它相关文章！

**Categories:** 后端开发

---