1.购物车里面功能无非就是删除商量,增加(减少)数量,单全选,商品合计
2.这段代码var cartItems = this.data.cartItems 获取购物车里面的商品,之后在通过下标e.currentTarget.dataset.index来获取当前的商品
选择事件(单全选)
//单选 select:function(e){ var CheckAll = this.data.CheckAll; CheckAll = !CheckAll var cartItems = this.data.cartItems for(var i=0;i<cartItems.length;i++){ cartItems[i].selected = CheckAll } this.setData({ cartItems: cartItems, CheckAll: CheckAll }) this.getsumTotal() }, // 全选 selectedCart:function(e){ var cartItems = this.data.cartItems //获取购物车列表 var index = e.currentTarget.dataset.index; //获取当前点击事件的下标索引 var selected = cartItems[index].selected; //获取购物车里面的value值 //取反 cartItems[index].selected =! selected; this.setData({ cartItems: cartItems }) this.getsumTotal(); wx.setStorageSync("cartItems", cartItems) }
购物车数量增加减少
add:function (e) { var cartItems = this.data.cartItems //获取购物车列表 var index = e.currentTarget.dataset.index //获取当前点击事件的下标索引 var value = cartItems[index].value //获取购物车里面的value值 value++ cartItems[index].value = value; this.setData({ cartItems: cartItems }); this.getsumTotal() wx.setStorageSync("cartItems", cartItems) //存缓存 }, //减 reduce: function (e){ var cartItems = this.data.cartItems //获取购物车列表 var index = e.currentTarget.dataset.index //获取当前点击事件的下标索引 var value = cartItems[index].value //获取购物车里面的value值 if(value==1){ value -- cartItems[index].value = 1 }else{ value -- cartItems[index].value = value; } this.setData({ cartItems: cartItems }); this.getsumTotal() wx.setStorageSync("cartItems", cartItems) },
删除事件
//删除 shanchu:function(e){ var cartItems = this.data.cartItems //获取购物车列表 var index = e.currentTarget.dataset.index //获取当前点击事件的下标索引 cartItems.splice(index,1) this.setData({ cartItems: cartItems }); if (cartItems.length) { this.setData({ cartList: false }); } this.getsumTotal() wx.setStorageSync("cartItems", cartItems) }, //提示 go:function(e){ this.setData({ cartItems:[] }) wx.setStorageSync("cartItems", []) },
商品价格合计
//合计 getsumTotal: function () { var sum = 0 for (var i = 0; i < this.data.cartItems.length; i++) { if (this.data.cartItems[i].selected) { sum += this.data.cartItems[i].value * this.data.cartItems[i].price } } //更新数据 this.setData({ total: sum }) },
整合代码
var json = require(‘../../data/Home_data.js‘) Page({ data: { cartItems:[], total:0, CheckAll:true }, onLoad:function(e){ }, onShow: function () { var cartItems = wx.getStorageSync("cartItems") this.setData({ cartList: false, cartItems: cartItems }) this.getsumTotal() }, //选择 select:function(e){ var CheckAll = this.data.CheckAll; CheckAll = !CheckAll var cartItems = this.data.cartItems for(var i=0;i<cartItems.length;i++){ cartItems[i].selected = CheckAll } this.setData({ cartItems: cartItems, CheckAll: CheckAll }) this.getsumTotal() }, add:function (e) { var cartItems = this.data.cartItems //获取购物车列表 var index = e.currentTarget.dataset.index //获取当前点击事件的下标索引 var value = cartItems[index].value //获取购物车里面的value值 value++ cartItems[index].value = value; this.setData({ cartItems: cartItems }); this.getsumTotal() wx.setStorageSync("cartItems", cartItems) //存缓存 }, //减 reduce: function (e){ var cartItems = this.data.cartItems //获取购物车列表 var index = e.currentTarget.dataset.index //获取当前点击事件的下标索引 var value = cartItems[index].value //获取购物车里面的value值 if(value==1){ value -- cartItems[index].value = 1 }else{ value -- cartItems[index].value = value; } this.setData({ cartItems: cartItems }); this.getsumTotal() wx.setStorageSync("cartItems", cartItems) }, // 选择 selectedCart:function(e){ var cartItems = this.data.cartItems //获取购物车列表 var index = e.currentTarget.dataset.index; //获取当前点击事件的下标索引 var selected = cartItems[index].selected; //获取购物车里面的value值 //取反 cartItems[index].selected =! selected; this.setData({ cartItems: cartItems }) this.getsumTotal(); wx.setStorageSync("cartItems", cartItems) }, //删除 shanchu:function(e){ var cartItems = this.data.cartItems //获取购物车列表 var index = e.currentTarget.dataset.index //获取当前点击事件的下标索引 cartItems.splice(index,1) this.setData({ cartItems: cartItems }); if (cartItems.length) { this.setData({ cartList: false }); } this.getsumTotal() wx.setStorageSync("cartItems", cartItems) }, //提示 go:function(e){ this.setData({ cartItems:[] }) wx.setStorageSync("cartItems", []) }, //合计 getsumTotal: function () { var sum = 0 for (var i = 0; i < this.data.cartItems.length; i++) { if (this.data.cartItems[i].selected) { sum += this.data.cartItems[i].value * this.data.cartItems[i].price } } //更新数据 this.setData({ total: sum }) }, })
购物车的操作就这么点,其实理解了很简单,小程序的语法和vue的语法很相识,学过vue的写小程序是很简单的,第一次写博客写的不好请谅解~~
代码以上传到githun上:https://github.com/Mynameisfwk/wechat-app-vivo
原文地址:https://www.cnblogs.com/fangwenkang/p/8258838.html
时间: 2024-10-04 22:47:48