微信小程序|购物车
购物车
在各种购物平台，购物车都是十分常见的，比如淘宝，美团等等各种应用软件。一般的软件购物车都包含商品图片，名称，价格。购物车其实就是一个物品或商品的简介，直观的反映了商品的特性，提醒了用户在购物车内的是一个什么样的商品，一定程度上避免了二次及多次浏览。此外，购物车最重要的功能就是方便用户购买商品，上述特性也都是为了突出这一功能。那么今天我们就来单纯的实现一下购物车功能。这里我们需要使用到上次介绍的多选框。如下图，就是我们今天要介绍的购物车功能。
图1.1 效果图
购物车的实现
首先需要了解购物车实现的功能需求。那么我们就来依次介绍着三种功能并介绍一下实现办法。
大概功能如下：
（1）单个商品购买数量的增加和减少。
（2）删除商品。当购物车为空时，页面会变为空购物车的布局。
（3）单选、全选和取消，而且会随着选中的商品计算出总价。
下面我们就重点介绍几个简单的功能。在index.js文件里，我们采用遍历的方式对玩偶的图片，名称等进行显示。
data: [ { name: "玩偶公仔", index: 0, state: 0, checkeedAll: false, data: [ { url: "../../images/1.jpg", classtitle: "小羊", index: 0, state: 0, checked: false, price: 9.9 }, { url: "../../images/2.jpg", classtitle: "吉他1", index: 1, state: 0, checked: false, price: 9.9 }, { url: "../../images/3.jpg", classtitle: "吉他1", index: 2, state: 0, checked: false, price: 4.9 } ] }, ], checkedAll: false, count: 0, priceAll: 0.0 }, |
|---|
只有所有单选的单选都选中了，当前单选的这块的的父级就会全部选中 ，将选中的父级添加在一个数组当中。如果它本身的数据的length=它被选中的length，就会让三级的全选选中。
var data = this.data.data; var datarr = []; for (var a = 0; a < data.length; a++) { if (data[a].checkeedAll == true) { datarr.push(data[a]); } } if (data.length === datarr.length) { this.setData({ checkedAll: true }); } else { this.setData({ checkedAll: false }); } |
|---|
//点击全选 AllTap: function (e) { var checkedAll = this.data.checkedAll; var list1 = this.data.data; for (var i = 0; i < list1.length; i++) { list1[i].checkeedAll = !checkedAll; var list2 = this.data.data[i].data; for (var a = 0; a < list2.length; a++) { list2[a].checked = !checkedAll; } } |
|---|
点击删除按钮则从购物车列表中删除当前元素，删除之后如果购物车为空，改变购物车为空标识。
//点击 单个删除 课程 shanchuTap: function (e) { var that = this; var groupIndex = e.target.dataset.groupindex; //点击 单个删除玩偶 shanchuTap: function (e) { var that = this; var groupIndex = e.target.dataset.groupindex; //获取当前index var index = e.target.dataset.index; //获取玩偶当前index wx.showModal({ title: '', content: '确定要删除吗？', cancelColor: "#ababab", confirmColor: "#027ee7", success(res) { if (res.confirm) { var list2 = that.data.data[groupIndex].data; list2.splice(index, 1); var dataStatus = 'data[' + groupIndex + '].data'; that.setData({ [dataStatus]: list2 }); wx.showToast({ title: '删除成功', icon: "none", }) } else if (res.cancel) { console.log('用户点击取消') } } }); }, var index = e.target.dataset.index; // 拿到当前玩偶 的index wx.showModal({ title: '', content: '确定要删除吗？', cancelColor: "#ababab", confirmColor: "#027ee7", success(res) { if (res.confirm) { var list2 = that.data.data[groupIndex].data; list2.splice(index, 1); var dataStatus = 'data[' + groupIndex + '].data'; that.setData({ [dataStatus]: list2 }); wx.showToast({ title: '删除成功', icon: "none", }) } else if (res.cancel) { console.log('用户点击取消') } } }); }, |
|---|
这里其实对于购物车功能实现的并不完全。但是index.js的代码有点过多，就不再这里展示了。如果有感兴趣的同学，可以去百度网盘提取，尝试一下。网址如下https://pan.baidu.com/s/1SxGulv1D5hY-sgme7oU-eg。提取码：1tim。
END
主 编 | 王楠岚
责 编 | 刘 连
能力越强，责任越大。实事求是，严谨细致。
——where2go 团队