微信小程序之购物车功能(2)

selectAll(e) { let selectAllStatus = this.data.selectAllStatus; // 是否全选状态 selectAllStatus = !selectAllStatus; let carts = this.data.carts; for (let i = 0; i < carts.length; i++) { carts[i].selected = selectAllStatus; // 改变所有商品状态 } this.setData({ selectAllStatus: selectAllStatus, carts: carts }); this.getTotalPrice(); // 重新获取总价 }

增减数量

点击+号,num加1,点击-号,如果num > 1,则减1

// 增加数量 addCount(e) { const index = e.currentTarget.dataset.index; let carts = this.data.carts; let num = carts[index].num; num = num + 1; carts[index].num = num; this.setData({ carts: carts }); this.getTotalPrice(); }, // 减少数量 minusCount(e) { const index = e.currentTarget.dataset.index; let carts = this.data.carts; let num = carts[index].num; if(num <= 1){ return false; } num = num - 1; carts[index].num = num; this.setData({ carts: carts }); this.getTotalPrice(); }

删除商品

点击删除按钮则从购物车列表中删除当前元素,删除之后如果购物车为空,改变购物车为空标识hasList为false

deleteList(e) { const index = e.currentTarget.dataset.index; let carts = this.data.carts; carts.splice(index,1); // 删除购物车列表里这个商品 this.setData({ carts: carts }); if(!carts.length){ // 如果购物车为空 this.setData({ hasList: false // 修改标识为false,显示购物车为空页面 }); }else{ // 如果不为空 this.getTotalPrice(); // 重新计算总价格 } }

总结

虽然一个购物车功能比较简单,但是里面涉及到微信小程序的知识点还是比较多的,适合新手练习掌握。

完整的小程序商城demo含购物车,请戳:wxapp-mall

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wyssyy.html