微信小程序实战商城系列（5）—— 购物车

阅读量：
0
发表时间：
2022-04-21 00:41:50

  为大家介绍的就是购物车，这里演示从商品列表中添加到购物车。

  下面先做商品列表页。如下图：

  布局分析：

  首先一个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）—— 侧栏分类

上一篇：一篇文章告诉你小程序跟微店的区别

热门文章