微信小程序实战 购物车功能
2023-09-11 14:18:03 时间
一、准备工作
软件环境:微信开发者工具
官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
基本需求
- 显示图书基本信息:名称、作者、描述、价格、数量。
- 点击复选框进行toggle操作。当前选中,则变成未选中;当前未选中,则变成选中。
- 图书数量的加减操作。
- 根据选中商品进行价格汇总。
- 全选/全不选。
目录结构
二、程序实现步骤
复选框进行toggle操作。当前选中,则变成未选择;当前未选中,则变成选中。购物车商品全部选中,全选按钮为选中状态。购物车商品全部未选中,全选按钮为未选中状态。
/**
* 用户选择购物车商品
*/
checkboxChange: function (e) {
console.log('checkbox发生change事件,携带value值为:', e.detail.value);
var checkboxItems = this.data.goodList;
var values = e.detail.value;
for (var i = 0; i < checkboxItems.length; ++i) {
checkboxItems[i].checked = false;
for (var j = 0; j < values.length; ++j) {
if (checkboxItems[i].isbn == values[j]) {
checkboxItems[i].checked = true;
break;
}
}
}
var checkAll = false;
if (checkboxItems.length == values.length) {
checkAll = true;
}
this.setData({
'goodList': checkboxItems,
'checkAll': checkAll
});
this.calculateTotal();
},
商品的加减操作。当前数量大于1,可以进行加减操作;当前数量为1时,只能进行加操作。
/**
* 用户点击商品减1
*/
subtracttap: function (e) {
var index = e.target.dataset.index;
var goodList = this.data.goodList;
var count = goodList[index].count;
if (count <= 1) {
return;
} else {
goodList[index].count--;
this.setData({
'goodList': goodList
});
this.calculateTotal();
}
},
/**
* 用户点击商品加1
*/
addtap: function (e) {
var index = e.target.dataset.index;
var goodList = this.data.goodList;
var count = goodList[index].count;
goodList[index].count++;
this.setData({
'goodList': goodList
});
this.calculateTotal();
},
用户点击全选/全不选,遍历购物车所有商品设置当前选中状态。
/**
* 用户点击全选
*/
selectalltap: function (e) {
console.log('用户点击全选,携带value值为:', e.detail.value);
var value = e.detail.value;
var checkAll = false;
if (value && value[0]) {
checkAll = true;
}
var goodList = this.data.goodList;
for (var i = 0; i < goodList.length; i++) {
var good = goodList[i];
good['checked'] = checkAll;
}
this.setData({
'checkAll': checkAll,
'goodList': goodList
});
this.calculateTotal();
}
选中商品数量发生改变时,进行商品总数量和总价格的计算。
/**
* 计算商品总数
*/
calculateTotal: function () {
var goodList = this.data.goodList;
var totalCount = 0;
var totalPrice = 0;
for (var i = 0; i < goodList.length; i++) {
var good = goodList[i];
if (good.checked) {
totalCount += good.count;
totalPrice += good.count * good.price;
}
}
totalPrice = totalPrice.toFixed(2);
this.setData({
'totalCount': totalCount,
'totalPrice': totalPrice
})
},
三、运行效果
微信小程序实战 购物车功能
注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权
相关文章
- WordPress 网站开发“微信小程序“实战(二)
- vue和微信小程序的区别、比较
- 微信开发 问题汇总
- 微信小程序为什么引入 rpx
- 微信小程序思维导图
- uni-app+php:微信小程序登录:用code得到openid/unionid(hbuilderx 3.7.3)
- uni-app:微信小程序登录:获取code时返回the code is a mock one(hbuilderx 3.7.3)
- 如何使用微信JS-SDK实际分享功能
- 微信小程序----自定义加载图标
- 微信小程序----wx:key(Now you can provide attr "wx:key" for a "wx:for" to improve performance.)
- 微信小程序----导航栏滑动定位(实现CSS3的position:sticky效果)
- SAP UI5和微信小程序框架里的全局变量
- 微信小程序踩坑:wx.openDocument(Object object)打不开文件
- 移动端h5网页、微信网页调试之利用vConsole真机调试+显示控制台打印信息、调试接口(附带vue项目里的具体使用方法)
- 微信小程序UI框架有哪些?
- uniapp微信小程序传参方法和注意事项
- 新手教程:怎样创建微信小程序?一看就懂
- uni、微信小程序——分包加载配置
- 微信小程序/uni——自定义导航栏
- 【全套】Android架构师进阶学习教程(性能优化、Kotlin、Flutter、微信小程序...)
- Ubuntu18.04安装微信(十八)
- 微信小程序自动化测试实战,支持录制回放、智能遍历
- 微信小程序(原生)——多层view的点击穿透问题
- 【微信小程序项目实战】TodoList-环境配置(1)
- 微信小程序商城demo