这个微信小程序的购物车功能,通过参照各大电商平台的功能和界面,然后总结出来的。
效果图
功能描述
1、可单选,全选/取消全选
2、增加、减少、手动编辑商品的数量
3、根据商品的数量统计价格
代码实现
此处省略一万字,废话不多说,直接上代码吧!
WXML静态布局、绑定“死”数据(主要功能代码)
<view class="list"> <block wx:for="{{dataArr}}" wx:key="index" wx:for-item="item"> <view class="li clearfix"> <!-- 单品选择按钮 --> <view class="check" wx:if="{{item.selected}}" bindtap="selectList" data-index="{{index}}"><text class="iconfont icon-dagou"></text></view> <view class="check" wx:else bindtap="selectList" data-index="{{index}}"><text class="iconfont icon-choose"></text></view> <view class="img fl"><image src="/UploadFiles/2021-04-02/{{item.image}}">WXSS:样式有点多,就不放上来啦,需要的可以留下你的邮箱地址哦
JS:
当页面刚加载进来,当然要先onShow一下,默认全选,统计购物车里所有商品的价格。PS:这里建议用onShow,因为每次进入购物车都需要重新加载数据,而onLoad和onReady只在初始化的时候执行一次。
onShow() { this.getTotalPrice(); }统计总价(该页面还有其它地方需要调用到这个方法)
// 统计总价 getTotalPrice() { // 获取购物车列表 let dataArr = this.data.dataArr; let total = 0; // 循环列表 for(let i = 0; i<dataArr.length; i++) { // 判断选中才会计算价格 if(dataArr[i].selected) { // 所有价格加起来 total += dataArr[i].num * dataArr[i].price; } } // 赋值到data中渲染到页面 this.setData({ dataArr: dataArr, totalPrice: total.toFixed(2) }); }选择商品(单选),通过 data-index="{{index}}" 把当前商品在列表数组中的下标传给事件,在更改单个商品的状态时,也要注意全选的状态,还有重新统计总价。
// 选择事件 selectList(e) { // 获取data- 传进来的index let index = e.currentTarget.dataset.index; // 获取购物车列表 let dataArr = this.data.dataArr; // 获取当前商品的选中状态 let selected = dataArr[index].selected; // 改变状态 dataArr[index].selected = !selected; this.setData({ dataArr: dataArr }); // 改变全选状态 for (var i=0; i<this.data.dataArr.length; i++){ // 当状态为全选时,每个元素其中有一个为false,则取消全选 // 当状态为非全选时,每个元素都为true,则全选 if(this.data.selectAllStatus){ if(!this.data.dataArr[i].selected){ this.setData({ selectAllStatus: false }); break; } }else { if(this.data.dataArr[i].selected){ this.setData({ selectAllStatus: true }); }else { this.setData({ selectAllStatus: false }); break; } } } // 重新统计总价 this.getTotalPrice(); }商品全选/取消全选,该状态更改之后也要重新统计总价哦,包括后面的,我就不再提示了
// 全选事件 selectAll(e) { // 是否全选状态 let selectAllStatus = this.data.selectAllStatus; selectAllStatus = !selectAllStatus; let dataArr = this.data.dataArr; for (let i = 0; i < dataArr.length; i++) { // 改变所有商品状态 dataArr[i].selected = selectAllStatus; } this.setData({ selectAllStatus: selectAllStatus, dataArr: dataArr }); // 重新统计总价 this.getTotalPrice(); }另外,还有增加或减少数量的方法。
温馨提示:减少数量时注意不能少于1(参考某宝商城的做法)
// 增加数量 addCount(e) { let index = e.currentTarget.dataset.index; let dataArr = this.data.dataArr; let num = dataArr[index].num; num = num + 1; dataArr[index].num = num; this.setData({ dataArr: dataArr }); // 重新统计总价 this.getTotalPrice(); }, // 减少数量 minusCount(e) { let index = e.currentTarget.dataset.index; let dataArr = this.data.dataArr; let num = dataArr[index].num; if(num <= 1){ wx.showToast({ title: '宝贝不能再减少啦', icon: 'none' }) return false; } num = num - 1; dataArr[index].num = num; this.setData({ dataArr: dataArr }); // 重新统计总价 this.getTotalPrice(); }然后,还有手动输入数量的方法
// 输入数量 inputCount(e) { let index = e.currentTarget.dataset.index; let dataArr = this.data.dataArr; let num = e.detail.value; dataArr[index].num = num; this.setData({ dataArr: dataArr }); // 重新统计总价 this.getTotalPrice(); }别忘了,手动输入数量也要有不能少于1的判断哦,我这里是在input失去焦点时做的判断,当然也是参考某宝商城的做法
// 失去焦点时判断数量是否小于1 bindblur(e) { let index = e.currentTarget.dataset.index; let dataArr = this.data.dataArr; let num = e.detail.value; if(num < 1){ wx.showToast({ title: '数量不能小于1', icon: 'none' }) num = 1; dataArr[index].num = num; this.setData({ dataArr: dataArr }); // 重新统计总价 this.getTotalPrice(); } }最后,就是去结算了,在处理完一堆噼里啪啦的业务之后,跳转到结算页面
// 去结算 toOrder() { // 处理数据 // ***** // Author: Moss // QQ: 827291427 // ***** // 跳转结算页面 wx.navigateTo({ url: '/pages/shop/order/order' }) }虽然,购物车的功能没有太难,但是涉及到的微信小程序的知识点还是挺多的,可以从中学习并掌握!
希望能帮到浏览这篇文章的你,当然更希望你能在阅读之后自己能写出来,而不是复制粘贴来敷衍任务。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
微信小程序,购物车
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]