1.先上图(购物车布局+功能总图)
2.下面就来分析需求了
①左滑功能
②单选功能
③全选功能
④件数的增加
⑤件数的减少
⑥批量删除
⑦计算所选商品的总价
3.话不多说,上主菜---------撸代码
①左滑功能的实现
思路:每一个购物车的商品是一个被封装的组件。
购物车代码(components构造器自定义组件wxml+wxjs)
解析:单选(selectItem),在wxml的单选节点上我绑定了自定义属性data-,在子组件使用e.currentTarget.dataset获取,
并且把这些获取的值传递给父,让他进行监听(this.triggerEvent),第一参数是监听的事件名称,type是类型,index,id,shopnum是传递给父的参数。
单选功能
全选功能
件数的增加和减少
总价的计算
删除
批量删除
二级确认删除弹窗的子组件
总结
购物车功能上还可以完善,等我接了后台有时间会更新,现有的已经可以给你一个思路了吧。在这篇里,不仅仅是对购物车功能的实现,还有component自定义组件方法的熟悉。