这个微信小程序的购物车功能，通过参照各大电商平台的功能和界面，然后总结出来的。
效果图
功能描述
1、可单选，全选/取消全选
2、增加、减少、手动编辑商品的数量
3、根据商品的数量统计价格
代码实现
此处省略一万字，废话不多说，直接上代码吧！
WXML静态布局、绑定“死”数据（主要功能代码）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<view class="list"> <block wx:for="{{dataArr}}" wx:key="index" wx:for-item="item"> <view class="li clearfix"> <!-- 单品选择按钮 --> <view class="check" wx:if="{{item.selected}}" bindtap="selectList" data-index="{{index}}"><text class="iconfont icon-dagou"></text></view> <view class="check" wx:else bindtap="selectList" data-index="{{index}}"><text class="iconfont icon-choose"></text></view> <view class="img fl"><image src="{{item.image}}" mode="aspectFill"></image></view> <view class="right fr"> <view class="title ellipsis-2">{{item.title}}</view> <!-- 增加减少编辑数量 --> <view class="num_w clearfix"> <view class="fl" bindtap="minusCount" data-index="{{index}}">-</view> <view class="fl num"><input type="number" value="{{item.num}}" bindinput="inputCount" bindblur="bindblur" data-index="{{index}}" /></view> <view class="fl" bindtap="addCount" data-index="{{index}}">+</view> </view> <view class="price">￥{{item.price}}</view> </view> </view> </block> </view> <view class="bottom clearfix"> <!-- 全选/取消全选按钮 --> <view class="check fl"> <text class="iconfont icon-dagou" wx:if="{{selectAllStatus}}" bindtap="selectAll"></text> <text class="iconfont icon-choose" wx:else bindtap="selectAll"></text> <text class="text">全选</text> </view> <view class="button gradientButton fr"><button bindtap="toOrder">去结算</button></view> <!-- 总价 --> <view class="price fr">合计：<text>￥{{totalPrice}}</text></view></view> |
WXSS：样式有点多，就不放上来啦，需要的可以留下你的邮箱地址哦
JS：
当页面刚加载进来，当然要先onShow一下，默认全选，统计购物车里所有商品的价格。PS：这里建议用onShow，因为每次进入购物车都需要重新加载数据，而onLoad和onReady只在初始化的时候执行一次。
|
1
2
3
|
onShow() { this.getTotalPrice();} |
统计总价（该页面还有其它地方需要调用到这个方法）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 统计总价getTotalPrice() { // 获取购物车列表 let dataArr = this.data.dataArr; let total = 0; // 循环列表 for(let i = 0; i<dataArr.length; i++) { // 判断选中才会计算价格 if(dataArr[i].selected) { // 所有价格加起来 total += dataArr[i].num * dataArr[i].price; } } // 赋值到data中渲染到页面 this.setData({ dataArr: dataArr, totalPrice: total.toFixed(2) });} |
选择商品（单选），通过 data-index="{{index}}" 把当前商品在列表数组中的下标传给事件，在更改单个商品的状态时，也要注意全选的状态，还有重新统计总价。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
// 选择事件selectList(e) { // 获取data- 传进来的index let index = e.currentTarget.dataset.index; // 获取购物车列表 let dataArr = this.data.dataArr; // 获取当前商品的选中状态 let selected = dataArr[index].selected; // 改变状态 dataArr[index].selected = !selected; this.setData({ dataArr: dataArr }); // 改变全选状态 for (var i=0; i<this.data.dataArr.length; i++){ // 当状态为全选时，每个元素其中有一个为false，则取消全选 // 当状态为非全选时，每个元素都为true，则全选 if(this.data.selectAllStatus){ if(!this.data.dataArr[i].selected){ this.setData({ selectAllStatus: false }); break; } }else { if(this.data.dataArr[i].selected){ this.setData({ selectAllStatus: true }); }else { this.setData({ selectAllStatus: false }); break; } } } // 重新统计总价 this.getTotalPrice();} |
商品全选/取消全选，该状态更改之后也要重新统计总价哦，包括后面的，我就不再提示了
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// 全选事件selectAll(e) { // 是否全选状态 let selectAllStatus = this.data.selectAllStatus; selectAllStatus = !selectAllStatus; let dataArr = this.data.dataArr; for (let i = 0; i < dataArr.length; i++) { // 改变所有商品状态 dataArr[i].selected = selectAllStatus; } this.setData({ selectAllStatus: selectAllStatus, dataArr: dataArr }); // 重新统计总价 this.getTotalPrice();} |
另外，还有增加或减少数量的方法。
温馨提示：减少数量时注意不能少于1（参考某宝商城的做法）
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
// 增加数量addCount(e) { let index = e.currentTarget.dataset.index; let dataArr = this.data.dataArr; let num = dataArr[index].num; num = num + 1; dataArr[index].num = num; this.setData({ dataArr: dataArr }); // 重新统计总价 this.getTotalPrice();}, // 减少数量minusCount(e) { let index = e.currentTarget.dataset.index; let dataArr = this.data.dataArr; let num = dataArr[index].num; if(num <= 1){ wx.showToast({ title: '宝贝不能再减少啦', icon: 'none' }) return false; } num = num - 1; dataArr[index].num = num; this.setData({ dataArr: dataArr }); // 重新统计总价 this.getTotalPrice();} |
然后，还有手动输入数量的方法
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 输入数量inputCount(e) { let index = e.currentTarget.dataset.index; let dataArr = this.data.dataArr; let num = e.detail.value; dataArr[index].num = num; this.setData({ dataArr: dataArr }); // 重新统计总价 this.getTotalPrice();} |
别忘了，手动输入数量也要有不能少于1的判断哦，我这里是在input失去焦点时做的判断，当然也是参考某宝商城的做法
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 失去焦点时判断数量是否小于1bindblur(e) { let index = e.currentTarget.dataset.index; let dataArr = this.data.dataArr; let num = e.detail.value; if(num < 1){ wx.showToast({ title: '数量不能小于1', icon: 'none' }) num = 1; dataArr[index].num = num; this.setData({ dataArr: dataArr }); // 重新统计总价 this.getTotalPrice(); }} |
最后，就是去结算了，在处理完一堆噼里啪啦的业务之后，跳转到结算页面
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 去结算toOrder() { // 处理数据 // ***** // Author: Moss // QQ: 827291427 // ***** // 跳转结算页面 wx.navigateTo({ url: '/pages/shop/order/order' })} |
虽然，购物车的功能没有太难，但是涉及到的微信小程序的知识点还是挺多的，可以从中学习并掌握！
希望能帮到浏览这篇文章的你，当然更希望你能在阅读之后自己能写出来，而不是复制粘贴来敷衍任务。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/m0_51408910/article/details/111921525
