微信小程序电商实战------购物车的功能

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