您现在的位置是：网站首页> 编程资料编程资料
微信小程序实现简单购物车小功能_javascript技巧_
2023-05-24
391人已围观
简介 微信小程序实现简单购物车小功能_javascript技巧_
本文实例为大家分享了微信小程序实现简单购物车的具体代码，供大家参考，具体内容如下
微信小程序定制好看的购物车页面，实现购物车功能，希望对您有所帮助！
1. 应用场景
2. 思路分析
3. 代码分析
4. 具体实现代码
效果截图：
1.应用场景
适用于商城、秒杀、商品购买等类型的小程序，负责将顾客浏览的商品保存下来，方便客户集中比较商品与购买商品。
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 < newList.length; i++) { newList[i].select = "success" } var select = "success" } else { for (var i = 0; i < newList.length; i++) { newList[i].select = "circle" } var select = "circle" } that.setData({ 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 < 99) { //默认峰值99件 num++ } var newList = that.data.slideProductList newList[index].num = num that.setData({ 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 < 1) { that.setData({ 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 < newList.length; i++) { if (newList[i].select == "success") { newCount += newList[i].num * newList[i].price } } that.setData({ count: newCount }) }, 4. 页面左滑动删除商品
功能后续整理
4. 具体实现代码
1.wxml
{{item.name}} 最新款 {{item.style}} ￥{{item.price}} 全选 合计： ￥{{count}}去结算 ({{num}}) 首页 分类 购物车 我的
2.js
const app = getApp() Page({ /** * 页面的初始数据 */ data: { goodsNum:'', userInfo: {}, hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), slideProductList: [ { id:1, name: '智能手环1111111112222211', url: "../../image/bracelet.jpg", style: "2代", price: "149.5", select: "circle", num: "1", code: "0001", amount: 500 }, { id: 2, name: "指环支架", url: "../../image/ring.jpg", style: "金色", price: "19.9", select: "circle", code: "0002", num: "1", amount: 500 }, { id: 3, name: "新款平板电脑", url: "../../image/iphone.png", style: "9.7英寸", price: "100", select: "circle", code: "0003", num: "1", amount: 110 }, { id: 4, code: "0001", name: "无人机", url: "../../image/uav.jpg", style: "低配版", price: "4999", select: "circle", code: "0004", num: "1", amount: 200 }, { id: 5, code: "0001", name: "无人机", url: "../../image/uav.jpg", style: "低配版", price: "4999", select: "circle", code: "0004", num: "1", amount: 200 }, { id: 6, code: "0001", name: "无人机", url: "../../image/uav.jpg", style: "低配版", price: "4999", select: "circle", code: "0004", num: "1", amount: 200 }, ], allSelect: "circle", num: 0, count: 0, lastX: 0, lastY: 0, text: "没有滑动", }, change: function (e) { var that = this var index = e.currentTarget.dataset.index var select = e.currentTarget.dataset.select if (select == "circle") { var stype = "success" } else { var stype = "circle" } var newList = that.data.slideProductList newList[index].select = stype that.setData({ slideProductList: newList }) that.countNum() that.count() }, addtion: function (e) { var that = this var index = e.currentTarget.dataset.index var num = e.currentTarget.dataset.num //默认99件 if (num < 99) { num++ } var newList = that.data.slideProductList newList[index].num = num that.setData({ goodsNum:num, slideProductList: newList }) that.countNum() that.count() }, 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({
相关内容
- JavaScript详细分析数据类型和运算符_javascript技巧_
- vue项目如何全局修改el-button样式_vue.js_
- Vue中关于this指向的问题示例详解_vue.js_
- 微信小程序实现页面导航的方法详解_javascript技巧_
- vue中的el-button样式自定义方式_vue.js_
- 使用开源Cesium+Vue实现倾斜摄影三维展示功能_vue.js_
- JavaScript引入方式深入解读_javascript技巧_
- 微信小程序实现购物车页面_javascript技巧_
- Node.js 与并发模型的详细介绍_node.js_
- JavaScript创建对象的几种方式及关于this指向问题_javascript技巧_
点击排行
本栏推荐
