這個微信小程序的購物車功能，通過參照各大電商平臺的功能和界面，然后總結出來的。
效果圖
功能描述
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
