微信小程序购物车demo详解

购物车顾名思义就是用来卖东西的车。购物车用于超市和网上购物。微信小程序里也有购物车。小编将详细讲解微信小程序购物车演示，供大家参考。希望对大家有帮助。

在过去，购物车基本上是通过大量的dom操作实现的。其实微信小程序和vue.js很像，我们来看看微信小程序购物车演示。

效果：

先搞清楚购物车的需求。

单选、全选、取消，总价格用所选商品计算

个人购买商品数量的增减

删除商品。当购物车为空时，页面会更改为空购物车的布局

根据设计图，可以先实现静态页面。接下来，看看购物车需要什么样的数据。

首先，它是一个购物车列表。列表中的项目需要是：图像、标题、价格、编号、所选内容和标识

然后在左下角选择全部，并且需要一个字段(selectallstatus)来指示是否全部被选择。

右下角的总价

比较后，你需要知道购物车是否是空的(haslist)

知道我们需要这些数据，就应该在页面初始化的时候先定义它们。

小程序代码的实现

初始化

我们通常通过请求服务器获取购物车列表数据，所以我们把它放在生命周期函数中给购物车赋值。我想在每次进入购物车时得到购物车的比较新状态，onload和onready在初始化时只执行一次，所以我需要把请求放到onshow函数中。

布局wxml

修正之前写的静态页面，绑定数据。

计算总价

总价=所选商品价格1 *所选商品价格2 *数量.

根据公式，我们可以得到

如果页面上的其他操作会导致总价发生变化，则需要调用此方法。

选择事件

单击时，它被选中，然后单击，它变成未选中。事实上，它改变了选定的字段。通过data-index='{{index}} '将列表数组中当前商品的索引传递给事件。

选择所有事件

全选是根据全选的选择状态改变每个商品的选择

增加或减少数量

数字，num加1，-，如果num；1减去1

删除商品

单击删除按钮从购物车列表中删除当前元素。如果删除后购物车为空，则将购物车更改为空，并将haslist标记为false

下面是题目的开头。微信小程序列表渲染这里是标题的结尾

微信小程序列表的渲染是怎样的？如何渲染小程序列表？什么是列表渲染？是wx:for。本文中我将分享微信小程序列表渲染的编译程序，希望对大家有所帮助。

如何渲染小程序列表？使用wx:for control属性在组件上绑定一个数组，这样组件就可以用数组中每一项的数据重复呈现。

默认数组当前项的下标变量名默认为index，数组当前项的变量名默认为item

如果项目在列表中的位置会动态改变或者新项目被添加到列表中，并且您希望列表中的项目保持其自身的特征和状态(例如

，的选定状态)，您需要使用wx:key来指定列表中项目的唯*标识符。

wx:key的值以两种形式提供

1.string，表示for循环数组中项的属性。此属性的值必须是列表中唯*的字符串或数字，并且不能动态更改。

2.保留关键字*这表示for循环中的项本身，它要求项本身是唯*的字符串或数字，例如：

当数据变化触发渲染层重新渲染时，带有key的组件会被纠正，框架会保证重新排序而不是重新创建，从而保证组件保持自己的状态，提高列表渲染的效率。

如果不提供wx:key，将报告警告。如果知道列表是静态的或者不需要关注它的顺序，可以选择忽略。

示例代码：