微信小程序購物車效果，供大家參考，具體內容如下
購物車是一個比較簡單的小功能。
購物車功能主要運用了微信小程序的緩存機制，在商品頁面將需要添加的數據同步傳入緩存中，然后在購物頁面通過同步方法拿到對應的數據，最后在頁面上進行渲染就可以了。
關鍵方法
|
1
2
|
var arrlist = wx.getStorageSync(‘key') //獲取緩存對應key得數據wx.setStorageSync(‘key'，arrlist) //修改緩存對應key得數據 |
以下便是購物車頁面的詳細代碼，以供交流參考：
切記要根據自身實際，不要按部就班
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
|
<scroll-view class="neirong" scroll-y="true" scroll-with-animation="true"><block wx:for="{{goodsCartList}}" wx:key="this"> <view class="carts"> <view class="cartsxq"> <view class="cartsxq_left"> <image src="{{item.detail.images}}"></image> </view> <view class="cartsxq_right"> <view class="pdtnamestyle">{{item.detail.pdtname}}</view> <view class="pricestyle">￥{{item.detail.price}}</view> <view class="xiaojistyle">金額：{{item.detail.price*item.count}}</view> <view class="gongnengdw"> <view class="jian" bindtap="oper" data-type="-" data-index="{{index}}" > <image src="/images/jian.png"></image> </view> <view class="suliang">{{item.count}}</view> <view class="jia" bindtap="oper" data-type="+" data-index="{{index}}" > <image src="/images/jia.png"></image> </view> </view> </view> </view> </view></block></scroll-view><view class="allTotal"> <view class="allTotal_clear" bindtap="toclears">清空</view> <view class="allTotal_left">總計：{{allTotal}}</view> <view class="allTotal_right">結算</view></view> |
wxss部分
|
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
/* pages/carts/carts.wxss */.carts{ width: 680rpx; height: auto; margin: 15rpx auto; border-bottom: 1rpx solid #e3e3e3;}.cartsxq{ width: 100%; height: 200rpx; display: flex;}.cartsxq image{ width: 200rpx; height: 150rpx; margin: 30rpx; border-radius: 10rpx;}.cartsxq_left{ flex: 4;}.cartsxq_right{ flex: 7; position: relative;}.gongnengdw{ display: flex; width: 200rpx; height: 50rpx; position: absolute; right: 0; bottom: 10rpx; align-items: center; overflow: hidden;}.gongnengdw image{ width: 40rpx; height: 40rpx;}.jian{ flex: 1; text-align: center;}.jia{ flex: 1; text-align: center;}.suliang{ flex: 1; text-align: center;}.pdtnamestyle{ margin: 10rpx; font-size: 28rpx; padding-top: 28rpx;}.pricestyle{ font-size: 34rpx; color: tomato; margin: 10rpx;}.xiaojistyle{ font-size: 21rpx; color: tomato; margin: 10rpx;}.allTotal{ display: flex; width: 100%; height: 80rpx; border-top: 1rpx solid rgba(0, 0, 0, 0.1); position: fixed; bottom: 0; align-items: center;}.allTotal_clear{ flex: 3; text-align: center; border-right: 1rpx solid rgba(0, 0, 0, 0.2);}.allTotal_left{ flex: 3; text-align: center; border-right: 1rpx solid rgba(0, 0, 0, 0.2);}.allTotal_right{ flex: 3; text-align: center;}.neirong{ height: calc(100vh - 90rpx);} |
js部分
|
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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
// 引用并封裝成對象var showData = require("../../utils/data.js")Page({ data: { goodsCartList:[], //總計 allTotal:0 }, //清空方法 toclears:function(e){ var that =this; let cartList =wx.getStorageSync("cartList")||[]; if(cartList != []){ wx.showModal({ title:"提示", content:"您是否要清空購物車", cancelColor: 'cancelColor', success:function(res){ if(res.confirm){ cartList.splice(cartList); wx.setStorageSync("cartList", cartList); that.getNewPage(); } } }) }else if(cartList == []){ wx.showModal({ title:"提示", content:"購物車沒東西了", }) } }, //處理加減操作 oper:function(e){ //獲取當前對象的type,后賦值給types var types = e.currentTarget.dataset.type; //獲取當前對象的index的值，后賦值給index var index = e.currentTarget.dataset.index; ///獲取當前數據索引對應的"count"（數量），后賦值給count var count = this.data.goodsCartList[index].count; var isDelet =false; //將一段語句賦值給temp var temp = "goodsCartList["+index+"].count"; //判斷當前對象的type值是否與“+”相等，減號以此類推 if(types == '+'){ this.setData({ [temp]:++count }) }else if(types == '-'){ if(count>1){ this.setData({ [temp]:--count }) }else{ isDelet = true; } } //如果同步緩存中的key有cartList 就返回cartList ,若沒有則返回空 //然后把同步存儲緩存的key賦值給cartList var cartList =wx.getStorageSync("cartList")||[]; var that =this; if(isDelet){ //頁面交互 wx.showModal({ title:"提示", content:"您是否要將該商品移出購物車", cancelColor: 'cancelColor', success:function(res){ if(res.confirm){ var newCartel = [] for(let i=0; i<cartList.length;i++){ if(i!= index){ newCartel.push(cartList[i]); } } wx.setStorageSync('cartList', newCartel); that.getNewPage(); } } }) }else{ cartList[index].count = count; wx.setStorageSync('cartList', cartList); } //讓cartList[index].count的值與上面創建的count相等 cartList[index].count = count; //默認allTotal為0，因為在onShow方法中已經調用了allTotal，所以在這里我們需要在局部作用域下新創建一個allTotal變量 var allTotal = 0; //把this.data.goodsCartList數據賦值給goodsCartList var goodsCartList = this.data.goodsCartList; for(let i=0; i<goodsCartList.length;i++){ allTotal += goodsCartList[i].detail.price * goodsCartList[i].count; console.log(allTotal); } this.setData({ allTotal:allTotal }) }, //封裝總計方法 getNewPage:function(){ var cartIndexList = wx.getStorageSync("cartList"); var cartList = showData.getGoodsListByIndex(cartIndexList); var goodsCartList =[]; var allTotal=0; for(let i=0; i<cartList.length; i++){ goodsCartList.push({ detail:cartList[i], count:cartIndexList[i].count }) allTotal = allTotal + cartList[i].price * cartIndexList[i].count; } this.setData({ goodsCartList:goodsCartList, allTotal:allTotal }) }, //頁面同步顯示 onShow: function () { this.getNewPage(); },}) |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/m0_51408910/article/details/111921525
