微信小程序实现购物车代码实例详解
更新时间：2019年08月29日 11:17:16 作者：爱哭鼻子的小忧伤
这篇文章主要介绍了微信小程序实现购物车代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
其实购物车都是类似的实现方法，只不过小程序是有他的数据层和业务层，在这里把之前的做法记录一下，分享出来也希望能给需要的小伙伴带来参考价值在最开始的时候先从本地存储中获取购物车数据，因为我们会切换页面 在页面切换的过程中需要实时重新加载购物车的数据，所以我们把获取的方法写在onShow中，而不是onLoad中：
onShow: function () {
const cart = wx.getStorageSync("cart");
let address = wx.getStorageSync("address") ;
console.log(address);
this.setData({
address, cart
})
this.loadCarts();
this.countAll();
}
点击按钮更改购物车的数量：
handleNumEdit(e) {
const { operator, goodsid } = e.target.dataset;
let { cart } = this.data;
cart[goodsid].count += (+operator);
if (cart[goodsid].count < 1) {
cart[goodsid].count = 1;
wx.showModal({
title: '提示',
content: '您确定要删除吗',
showCancel: true,
cancelText: '取消',
cancelColor: '#000000',
confirmText: '确定',
confirmColor: '#3CC51F',
success: (result) => {
if (result.confirm) {
delete cart[goodsid];
this.loadCarts();
this.countAll();
} else {
}
}
});
} else if (cart[goodsid].count > cart[goodsid].goods_number) {
cart[goodsid].count = cart[goodsid].goods_number;
wx.showToast({
title: '没有库存了',
icon: 'none',
duration: 1500,
mask: true
});
}
this.loadCarts();
this.countAll();
}
加载购物车数据的方法：
data: {
cart: {},
address: {},
totalPrice: 0,
categoryLength: 0,
isAllChecked: true
},
单个商品被选中时触发：
loadCarts() {
let { cart } = this.data;
let isAllChecked = true;
for (const key in cart) {
if (cart.hasOwnProperty(key)) {
const element = cart[key];
if (!element.isChecked) {
isAllChecked = false;
break;
}
}
}
this.setData({
cart,
isAllChecked
});
},
全选和反选触发的事件：
handleItemChecked(e) {
let { goodsid } = e.target.dataset;
let { cart } = this.data;
let { isChecked } = cart[goodsid];
cart[goodsid].isChecked = !isChecked;
let checkedLength = 0;
for (const key in cart) {
if (cart.hasOwnProperty(key)) {
if (cart[key].isChecked) {
checkedLength++;
}
}
}
const isAllChecked = checkedLength == Object.keys(cart).length;
this.countAll();
this.setData({
isAllChecked
})
},
点击结算时触发：
handleItemAllChecked() {
let { isAllChecked } = this.data;
let { cart } = this.data;
isAllChecked = !isAllChecked;
for (const key in cart) {
if (cart.hasOwnProperty(key)) {
cart[key].isChecked = isAllChecked;
}
}
this.setData({
isAllChecked,
cart
})
this.countAll();
},
纯js代码，可能有一定小程序代码经验的会看得轻松一点。以上便可以实现在对购物车的商品进行加减和全选与反选，以及对商品进行数量合计并计算价格。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了JavaScript获取页面元素的常用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了el-date-picker 如何限制选择六个月内的日期,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
这篇文章主要为大家介绍了prefers-color-scheme设置检测系统主题色实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
命名空间一个最明确的目的就是解决重名问题。这篇文章主要介绍了TypeScript 命名空间的相关知识，本文通过实例详解给大家介绍的非常详细,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了js同源策略,较为详细的分析了javascript中同源策略的概念与相关应用注意事项,需要的朋友可以参考下2015-05-05
这篇文章主要教大家如何简单实现js菜单栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要介绍了微信小程序实现运动步数排行功能（可删除），实现代码也很简单,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了微信小程序实现添加手机联系人功能,结合实例形式分析了微信小程序添加联系人的具体步骤,包括布局与逻辑实现技巧,需要的朋友可以参考下2017-11-11
简单的防盗链功能代码(iframe)...2006-08-08
这篇文章主要教大家如何快速简单的实现js计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
最新评论