微信小程序购物车功能的实现（小程序购物车）

前言在过去，购物车基本上是通过大量的DOM操作来实现的。微信小程序实际上与vue.js的用法非常相似接下来，我们来看看小程序如何实现购物车功能。

需求我们先搞清楚购物车的需求。

单选，全选和取消，总价将与所选商品一起计算。

单一商品采购数量的增减。

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

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

首先，它是一个商品列表（购物车），列表中的项目需要:商品地图（图像）、商品名称（标题）、单价（价格）、数量（数量）、选中与否以及商品id（id）。

然后在左下角选择全部，需要一个字段（selectAllStatus）来指示是否全部选中。

右下角的总价。

最后，我们需要知道购物车是否为空（hasList）

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

代码实现

初始化

page（{ data:{ carts:【】，//购物车列表hasList:false，//列表中是否有数据totalPrice:0，//总价，初始为0 selectAllStatus:true //选择所有状态，并且默认选择全部}，on show（）{ this . setdata（{ has list:true，//既然有数据，我们就将其设置为true。购物车:【{id:1，标题:‘‘半斤鲜芹菜‘，图像:‘/image/S5 . png‘，编号:4，价格:0.01，选定:true}，{ID: 2，标题:‘‘500克白米‘，图像:‘/image/S6 . png‘，编号:1，价格:0.03，选定:true }】}）；}，}）购物车列表数据我们通常通过请求服务器获取数据，因此我们将其放在生命周期函数中为购物车赋值。我认为每次进入购物车时，我都必须获得购物车的最新状态，而onLoad和onReady在初始化期间只执行一次，因此我需要将请求放在onShow函数中。（我们在这里假装一些假数据。)

布局wxml

修复之前编写的静态页面并绑定数据。

{ { item . title } } {{ { item . price } } -{ { item . num } }+×Select All RMB { } { { { total price } } }计算总价。

总价=价格*所选商品的数量zhujicankao价格*所选商品的数量小编...根据公式，可以得到

getTotalPrice（）{ let carts = this . data . carts；//获取购物车列表let total = 0；for（设I = 0；如果I页面中的其他操作将导致总价发生变化，则需要调用此方法。

选择事件

点击时选中，再次点击变为未选中，实际上是更改选中的字段。通过data -index =“{ { index } }”将列表数组中当前商品的下标传递给事件。

select list（e）{ const index = e . current target . dataset . index；//Get index let carts = this . data . carts由data-传入；//获取购物车列表const selected = carts【index】。已选择；//获取当前购物车的选中状态【index】。selected =！已选择；//更改状态this . setdata（{ carts:carts }）；this . gettotalprice（）；//再次获取总价}

选择所有事件

全选是根据selectAllStatus更改每个商品的选中状态。

selectAll（e）{ let selectAll status = this . data . selectAll status；//是否选择AllStatus =！selectAllStatuslet carts = this . data . carts；for（设I = 0；我推车。selected = selectAllStatus//更改所有商品的状态} this . setdata（{ select all status:select all status，Carts:Carts }）；this . gettotalprice（）；//再次获取总价}

增加或减少数量

单击+号，num加1，单击+号，如果num》1，则减1。

//增加数量add count（e）{ const index = e . current target . dataset . index；let carts = this . data . carts；让num = carts【index】。numnum = num+1；手推车【索引】。num = numthis . setdata（{ carts:carts }）；this . gettotalprice（）；}，//减少数量MINUS count（e）{ const index = e . current target . dataset . index；let carts = this . data . carts；让num = carts【index】。numif（num返回false} num = num -1；手推车【索引】。num = numthis . setdata（{ carts:carts }）；this . gettotalprice（）；}

删除商品

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

delete list（e）{ const index = e . current target . dataset . index；let carts = this . data . carts；carts . splice（index，1）；//从购物车列表中删除此产品this . setdata（{ carts:carts }）；如果（！carts . length）{//如果购物车为空this . setdata（{ has list:false//将标志修改为false，并将购物车显示为空页面}）；}else{ //如果不为空，this . gettotalprice（）；//重新计算总价}}总结虽然购物车的功能比较简单，但微信小程序涉及的知识点还是比较多的，适合初学者练习和掌握。

推荐教程:微信小程序

以上是微信小程序购物车功能的实现细节。更多资讯请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 关于微信小程序后台搭建的具体步骤(微信小程序搭建流程)
• applet中页面间价值转移的两种方法（applet价值转移）
• 小程序如何获取输入标签的值（小程序获取输入框的值）
• 微信小程序如何集成实时音视频通话功能？
• 导入和包含在applet中(applet导入)有什么区别

本文由主机参考刊发，转载请注明：微信小程序购物车功能的实现（小程序购物车） https://zhujicankao.com/102221.html