微信小程序实战商城系列（5）—— 购物车
至成科技2020-09-14访问量（1124）评论（0）
摘要：首先一个list的主盒子，接着是item盒子，这是必须的。然后把item分成左侧的图片部分，和右侧的说明部分（item盒子使用横向弹性盒）右侧的说明部分又分上下2部分（右侧说明部分盒子使用纵向弹性盒）下面价钱购物车部分（下面价钱购物车部分也使用横向弹性盒，中间使用justify-content: space-between;填充空白）
为大家介绍的就是购物车，这里演示从商品列表中添加到购物车。
下面先做商品列表页。如下图：
布局分析：
首先一个list的主盒子，接着是item盒子，这是必须的。然后把item分成左侧的图片部分，和右侧的说明部分（item盒子使用横向弹性盒）右侧的说明部分又分上下2部分（右侧说明部分盒子使用纵向弹性盒）下面价钱购物车部分（下面价钱购物车部分也使用横向弹性盒，中间使用justify-content: space-between;填充空白）
<：<：<：
数据部分，一般情况都是访问接口获取数据的，这里并没有使用网络访问，为了简化demo，直接把一组数据放在data对象中。同学们可以根据其数据结构自己编写后台接口。
编写购物车部分，如下图所示：
布局分析：
首先一个list的主盒子，接着是item盒子，这是必须的。
然后把item分成左侧的图片部分，和右侧的说明部分（item盒子使用横向弹性盒）
右侧的说明部分又分上下2部分（右侧说明部分盒子使用纵向弹性盒）
下面价钱、购物加减、购物车部分（使用纵向弹性盒）
最下面的购物加减、购物车部分（使用横向弹性盒，中间使用justify-content: space-between;填充空白）
<：<：<：
运行结果：
demo：相关阅读：
微信小程序实战商城系列（4）—— 商品属性分类
微信小程序实战商城系列（3）—— 购物数量加减
微信小程序实战商城系列（2）—— 仿淘宝分类入口
微信小程序实战商城系列（1）—— 侧栏分类
