微信小程序购物车功能实现（干货满满） |
您所在的位置：网站首页 › 迪拜房价走势图最新消息 › 微信小程序购物车功能实现（干货满满） |
微信小程序购物车功能实现（干货满满）
|
微信小程序定制好看的购物车页面，实现购物车功能，希望对您有所帮助！
1. 应用场景 2. 思路分析 3. 代码分析 4. 具体实现代码 效果截图： 适用于商城、秒杀、商品购买等类型的小程序，负责将顾客浏览的商品保存下来，方便客户集中比较商品与购买商品。 2.思路分析实现购物车功能前请思考以下问题： 1.小程序如何布局？使用什么布局能提升页面开发效率？？ 2.将购物车功能分为四个小功能：(1)一键全选/取消商品 （2）动态添加商品可手动输入 （3）计算结算商品金额 （4）左滑动删除商品 答：（1）在小程序中主要是兼容安卓与ios两种型号手机，在页面开发中可使用flex布局，能极大的提高页面的开发效率。（2）请仔细阅读代码分析，看懂自己也可轻松实现购物车功能 so easy！！！ 3.代码分析1. 一键全选/取消 allSelect: function (e) { var that = this var allSelect = e.currentTarget.dataset.select//判断是否选中 circle是 success否 var newList = that.data.slideProductList if (allSelect == "circle") { for (var i = 0; i for (var i = 0; i slideProductList: newList, allSelect: select }) that.countNum()//计算商品数量 that.count()//计算商品金额 },2. 动态添加商品可手动输入 a 添加商品 addtion: function (e) {//添加商品 var that = this var index = e.currentTarget.dataset.index var num = e.currentTarget.dataset.num if (num goodsNum:num, slideProductList: newList }) that.countNum() that.count() }, b 减少商品 subtraction: function (e) {//减少商品 var that = this var index = e.currentTarget.dataset.index var num = e.currentTarget.dataset.num var newList = that.data.slideProductList //当1件时，再次点击移除该商品 if (num == 1) { newList.splice(index, 1) } else { num-- newList[index].num = num } that.setData({ goodsNum: num, slideProductList: newList }) that.countNum() that.count() }, c 直接输入 inputNum:function(e){ var num = e.detail.value; this.setData({goodsNum:num}) }, numIputBlur:function(e){ var that = this; var num = that.data.goodsNum; var index = e.currentTarget.dataset.index; var newList = that.data.slideProductList if (num == "") { //判空 newList[index].num = 1; that.setData({ slideProductList: newList }) }else if (num goodsNum: newList[index].num, slideProductList: newList }) wx.showToast({ title: '亲，该宝贝不能减少了哦~', icon: 'none' }) }else if(num>99){ that.setData({ goodsNum: newList[index].num, slideProductList: newList }) wx.showToast({ title: '亲，该宝贝最多购买99件哦~', icon: 'none' }) }else{ newList[index].num = num; that.setData({ slideProductList: newList }) } that.countNum() that.count() },3. 计算结算商品金额 count: function () {//计算金额方法 var that = this var newList = that.data.slideProductList var newCount = 0 for (var i = 0; i newCount += newList[i].num * newList[i].price } } that.setData({ count: newCount }) },4. 页面左滑动删除商品 功能后续整理 4. 具体实现代码1.wxml |
【本文地址】
今日新闻 |
推荐新闻 |