微信小程序购物车功能的实现(在小程序云开发中添加购物车)

以前购物车基本上是通过大量的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 carts:[ {id:1，title: # 39；半斤鲜芹菜 # 39；，图像: # 39；/image/S5 . png # 39；，编号:4，价格:0.01，选定:真}，{id:2，标题: # 39；大米500克 # 39；，图像: # 39；/image/S6 . png # 39；，num:1，price:0.03，select:true }]})；}，})购物车列表数据我们通常通过请求服务器获取数据，所以我们把它放在生命周期函数中给购物车赋值。每次进入购物车都想获取购物车的最新状态，而onLoad和onReady在初始化时只执行一次，所以需要把请求放在onShow函数中。(先在这里装一些假数据。)

布局wxml

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

ltview class = cart -box ； gt lt！-- wx:用于渲染购物车列表-->: lt；查看wx:for = ；{ {购物车} } gt lt！-- wx:如果选择显示不同的图标-->； lticon wx:if = ；{ { item.selected } } type = 成功 gt；color = 红色 bindtap = 选择列表data -index = ；{ { index } } / gt； lticon wx:else type = ；圆圈 bindtap = 选择列表data -index = ；{ { index } } / gt； lt！--点击商品图片跳转到商品详情-->； lt导航器url = ../细节/细节？id = { { item.id } } gt ltimage class = cart -拇指 src = { { item.image } } gt lt/image gt； lt/navigator gt； lttext gt{ { item.title } } lt/text gt； lttext gt{ { item.price } } lt/text gt； lt！--增减数量按钮-->: lt；视图 gt lttext bindtap = 负计数 data -index = ；{ { index } } gt- lt；/text gt； lttext gt{ { item.num } } lt/text gt； lttext bindtap = 添加计数 data -index = ；{ { index } } gt+ lt；/text gt； lt/view gt； lt！--删除按钮-->: lt；text bindtap = 删除列表 data -index = ；{ { index } } gt× lt；/text gt； lt/view gt； lt/view gt； lt！--底部操作栏-->: lt；视图 gt lt！-- wx:if，是否选择所有不同的图标-->: lt；icon wx:if = ；{ { selectAllStatus } } type = 成功圈 color = # fff bindtap = 选择全部 / gt； lticon wx:else type = ；圆圈 color = # fff bindtap = 选择全部 / gt； lttext gt全选: lt；text gt{ { totalPrice } } lt/text gt； lt/view gt；计算总价

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

getTotalPrice(){ let carts = this . data . carts；//获取购物车列表let total = 0；for(设I = 0；我 lt手推车.长度；++){//循环列表以获取每个数据if(carts[i].selected) {//只有选中时才会计算总价+= Carts [I]。Num * Carts [I]。价格；//所有价格加起来}} this.setData({ //最后赋给数据并渲染到页面Carts: Carts，总价:Total。to fixed(2)})；}页面中所有其他会引起总价变化的操作都需要调用这个方法。

选择事件

点击选中，再点击取消选中，实际上就是改变选中的字段。传递数据-index = ；{ { index } } 将列表数组中当前商品的下标传递给事件。

select list(e){ const index = e . current target . dataset . index；//获取data-传入的索引let carts = this . data . carts；//获取购物车列表const selected = carts [index]。被选中；//获取当前购物车的选中状态[index]。选中=！被选中；//改变状态this . setdata({ carts:carts })；this . gettotalprice()；//再次获取总价}

选择所有事件

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

select all(e){ let selectAll status = this . data . selectAll status；//选择所有状态selectAllStatus =！selectAllStatuslet carts = this . data . carts；for(设I = 0；我 lt手推车.长度；i++) { carts[i]。selected = selectAllStatus//更改所有商品的状态} this . setdata({ select all status:select all status，carts:carts })；this . gettotalprice()；//再次获取总价}

增加或减少数量

单击+号，数字加1，然后单击-号。如果num >: 1，则减1。

//增加数量add count(e){ constindex = e . current target . dataset . index；let carts = this . data . carts；设num = carts[index]。numnum = num+1；手推车[索引]。num = numthis . setdata({ carts:carts })；this . gettotalprice()；}，//减少数量减去count(e){ const index = e . current target . dataset . index；let carts = this . data . carts；设num = carts[index]。numif(num lt；= 1){返回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(索引，1)；//删除购物车列表中的this.setData({ carts: carts})项；如果(！cart . length){//如果购物车为空this.setData({ hasList: false //修改ID为false，显示购物车的空页面})；}else{ //如果不为空this . gettotalprice()；//重新计算总价}}总结虽然购物车的功能比较简单，但是微信小程序涉及的知识点还是比较多的，适合新手练习和掌握。

推荐教程:《微信小程序》以上是微信小程序购物车功能实现的详细内容。请多关注主机参考其他相关文章！

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

• 微信小程序翻译功能上线：现已支持18种语言
• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 微信小程序无法获取位置信息怎么办？（微信小程序无法获取位置信息）
• 微信小程序如何实现九宫格跳（如何在小程序中配置九宫格抽奖）
• 如何调节微信小程序的亮度？

本文由主机参考刊发，转载请注明：微信小程序购物车功能的实现(在小程序云开发中添加购物车) https://zhujicankao.com/76856.html