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自定义组件方法的熟悉。
网友评论