其实购物车都是类似的实现方法,只不过小程序是有他的数据层和业务层,在这里把之前的做法记录一下,分享出来也希望能给需要的小伙伴带来参考价值在最开始的时候先从本地存储中获取购物车数据,因为我们会切换页面 在页面切换的过程中需要实时重新加载购物车的数据,所以我们把获取的方法写在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代码,可能有一定小程序代码经验的会看得轻松一点。以上便可以实现在对购物车的商品进行加减和全选与反选,以及对商品进行数量合计并计算价格。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
微信小程序,购物车,代码
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“微信小程序实现购物车代码实例详解”评论...
更新动态
2025年11月05日
2025年11月05日
- 小骆驼-《草原狼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]