主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
如何在微信小程序中实现购物车功能?下面的文章将为您介绍如何在微信小程序中实现购物车功能。 有一定的标准值。 请转告给有困难的朋友。 我希望这对你有帮助。
无论是商场还是餐饮小程序,都必须通过下单来完成交易,所以就有了加入购物车的操作。 到目前为止,购物车功能主要通过许多 DOM 操作来实现。 Applet 不是基于 Web 的,无法创建 DOM。 在微信小程序中实现购物车功能其实和使用vue.js非常相似。
首先,了解您的购物车需求。
单选、全选及取消,根据所选商品计算总金额
增加/减少单品购买数量
删除产品。 如果购物车为空,页面将更改为空购物车布局。
按照蓝图,可以先实现静态页面。 接下来,让我们看一下购物车所需的数据类型。
第一个是产品列表(购物车)。 列表中的商品必须有商品图片(image)、商品名称(title)、单价(price)、数量(num)、是否选中(selected)、商品ID(id)。
接下来,选择左下角的全部。 我们需要一个字段(selectAllStatus)来指示是否全部被选中。
右下角总价(totalPrice)
最后我们需要知道购物车是否为空(hasList)
如果这些数据是现在我们知道我们需要它,我们首先在页面初始化时定义这些数据。
初始化代码:
Page({ data: { carts:[], // 购物车列表 hasList:false, // 列表是否有数据totalPrice:0, // 总金额,初始值为 0 selectAllStatus:true // 选择所有状态 默认情况下,选择全部。}, onShow() { this.setData({ hasList:true, // 我们有数据,所以让我们将其设置为 true Carts:[ {id:1,title:\'0.5 磅新鲜芹菜\' , image :\'/image/s5.png\',num:4,price:0.01,selected:true}, {id:2,title:\'黑色 500g\',image:\'/image/s6.png \ ',num:1,price:0.03,selected:true} ] }); },})
购物车列表 正常情况下,数据是通过请求服务器获取的,所以使用生命周期函数给购物车赋值马苏。 我本想每次有人进入购物车时获取购物车的最新状态,但是onLoad和onReady在初始化期间只运行一次,所以我必须将请求放在onShow函数中。
计算总价
根据公式,我们得到:
getTotalPrice() { let Carts =this.data.carts; // 获取购物车列表 let Total = 0; for(let i = 0;i<carts.length; i++)="{ = " Loop遍历列表,获取每条数据 if(carts[i].selected) {// 仅当选择时才计算价格。 Total += Cart[i].num * Cart[i].price; // 所有价格相加} } this.setData({ // 最后分配给数据并渲染在页面上 Cart: Cart ,totalPrice:total. toFixed(2) });}
如果页面上的其他操作更改了总价,则必须调用此方法。
选择事件
点击选择,再次点击取消选择。 这实际上是改变所选字段。 传递 data-index="{{index}}" 将列表数组中的当前产品索引传递给事件。
selectList(e) { const index =e.currentTarget.dataset.index; // 获取data-传递的索引 let Carts =this.data.carts; // 获取购物车列表 Get const selected =carts [index].selected; // 获取当前商品选择状态 Cart[index].selected= !selected; // 更改状态 this.setData({ Cart: Cart }); //获取总价 Price}
全选事件
全选表示根据总选状态改变每个商品的状态 selectAllStatusselected
selectAll(e) { let selectAllStatus =this.data.selectAllStatus; // 是否选择所有状态 selectAllStatus =!selectAllStatus; for (let i = 0; i< Cart.Length; i++) { Cart[i].selected = selectAllStatus; // 更改所有项目的状态} this.setData({ selectAllStatus:selectAllStatus, Cart: Cart this .getTotalPrice(); // 获取总价}
增加/减少数量
点击 + 符号将 num 加 1 并更改 - 点击。 如果 num > 1,则减 1。
// 增加数量 addCount(e) { constindex = e.currentTarget.dataset.index cart =this.data.carts; 让 num = cart[index].num; number = number + 1; Cart[index].num =num; this.setData({ Cart: Cart }); this.getTotalPrice();},// 减少数量 minusCount(e) { constindex =e.currentTarget. .索引;让 s =this.data.carts; num = cart[index].num;。 if(num <= 1){ return false; number = number - 1; this.setData ({ cart: cart });}
Item删除
单击“删除”按钮可从购物车列表中删除当前元素。 如果删除后您的购物车为空,请修改您的购物。 如果购物车是空的,则标志 hasList 为 false。
deleteList(e) { constindex =e.currentTarget.dataset.index; 购物车 =this.data.carts; Cart.Splice(index,1); // 删除购物车列表中的此项 this.setData({ Cart: Cart }); if(!carts.length){ // 如果购物车为空 this.setData ({ hasList:false // 将标志更改为 false,表明购物车为空 Page}); }else{ // 如果不为空,则 this.getTotalPrice(); // 重置总价 计算 } }
小程序的购物车功能开发与网页基本相同,只是各个功能模块是分开单独开发的。 这个想法与应用程序开发完全相同。 虽然购物车功能比较简单,但是还是有一些微信小程序相关的知识点。有相当多。
推荐:《小程序开发教程》
下载微信应用
微信是一款支持通过手机网络发送语音消息、视频、照片和文字的移动通讯软件。 。 微信带来了全新的移动通信体验,您可以单独或群组聊天,还可以根据您的地理位置查找附近的人。 有需要的朋友,请快来保存您的下载体验吧!
这几篇文章你可能也喜欢:
- 介绍如何用小程序生成参数二维码(二维码+小程序参数)
- 如何在小程序中实现下拉刷新页面的功能(小程序滚动-视图下拉更新)
- 如何构建我的小程序开发项目?(教程)(微信小程序开发实用支持资源)
- 小程序通过函数调优来解决多次页面跳转的问题(小程序跳出率)。
- 小程序API可以提供哪些功能?(小程序API教程)
本文由主机参考刊发,转载请注明:如何在微信小程序中实现购物车功能?(方法介绍)(如何使用微信小程序购物车) https://zhujicankao.com/124181.html
评论前必须登录!
注册