1.先上图(购物车布局+功能总图)

购物车功能布局图
2.下面就来分析需求了
①左滑功能
②单选功能
③全选功能
④件数的增加
⑤件数的减少
⑥批量删除
⑦计算所选商品的总价
3.话不多说,上主菜---------撸代码
①左滑功能的实现
思路:每一个购物车的商品是一个被封装的组件。
购物车代码(components构造器自定义组件wxml+wxjs)

购物车wxml代码1

购物车代码结构2

左滑的功能实现代码

单选、删除。件数加减,出现删除二次确认事件
解析:单选(selectItem),在wxml的单选节点上我绑定了自定义属性data-,在子组件使用e.currentTarget.dataset获取,
并且把这些获取的值传递给父,让他进行监听(this.triggerEvent),第一参数是监听的事件名称,type是类型,index,id,shopnum是传递给父的参数。

父的wxml结构
单选功能

单选功能
全选功能

全选功能
件数的增加和减少

件数的增减
总价的计算

总价计算函数
删除

左滑的函数

二次确认删除的弹窗

弹窗的隐藏
批量删除

批量删除事件
二级确认删除弹窗的子组件

二级确认删除弹窗的子组件wxml

二级确认删除弹窗的子组件wxjs
总结
购物车功能上还可以完善,等我接了后台有时间会更新,现有的已经可以给你一个思路了吧。在这篇里,不仅仅是对购物车功能的实现,还有component自定义组件方法的熟悉。