VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云最新优惠促销活动
jtti最新优惠促销活动
新罗云最新优惠促销活动

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

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

以前购物车基本上是通过大量的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();//重新计算总价}}总结虽然购物车的功能比较简单,但是微信小程序涉及的知识点还是比较多的,适合新手练习和掌握。

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

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

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

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 微信小程序购物车功能的实现(在小程序云开发中添加购物车)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!