微信小程序购物车效果，供大家参考，具体内容如下
购物车是一个比较简单的小功能。
购物车功能主要运用了微信小程序的缓存机制，在商品页面将需要添加的数据同步传入缓存中，然后在购物页面通过同步方法拿到对应的数据，最后在页面上进行渲染就可以了。
关键方法
|
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
