微信小程序实现简单购物车小功能

网友投稿 798 2023-11-11

微信小程序实现简单购物车小功能

本文实例为大家分享了微信小程序实现简单购物车的具体代码，供大家参考，具体内容如下


微信小程序定制好看的购物车页面，实现购物车功能，希望对您有所帮助！

1. 应用场景

2. 思路分析

3. 代码分析

4. 具体实现代码

效果截图：

1.应用场景

适用于商城、秒杀、商品购买等类型的小程序，负责将顾客浏览的商品保存下来，方便客户集中比较商品与购买商品。

2.思路分析

实现购物车功能前请思考以下问题：

1.小程序如何布局？使用什么布局能提升页面开发效率？？

2.将购物车功能分为四个小功能：(1)一键全选/取消商品 （2）动态添加商品可手动输入 （3）计算结算商品金额 （4）左滑动删除商品

答：（1）在小程序中主要是兼容安卓与ios两种型号手机，在页面开发中可使用flex布局，能极大的提高页面的开发效率。（2）请仔细阅读代码分析，看懂自己也可轻松实现购物车功能 so easy！！！

3.代码分析

1. 一键全选/取消

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
allSelect: function (e) {
var that = this
var allSelect = e.currentTarget.dataset.select//判断是否选中 circle是 success否
var newList = that.data.slideProductList
if (allSelect == "circle") {
for (var i = 0; i < newList.length; i++) {
newList[i].select = "success"
}
var select = "success"
} else {
for (var i = 0; i < newList.length; i++) {
newList[i].select = "circle"
}
var select = "circle"
}
that.setData({
slideProductList: newList,
allSelect: select
})
that.countNum()//计算商品数量
that.count()//计算商品金额
},

2. 动态添加商品可手动输入

a 添加商品

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
addtion: function (e) {//添加商品
var that = this
var index = e.currentTarget.dataset.index
var num = e.currentTarget.dataset.num
if (num < 99) { //默认峰值99件
num++
}
var newList = that.data.slideProductList
newList[index].num = num
that.setData({
goodsNum:num,
slideProductList: newList
})
that.countNum()
that.count()
},

b 减少商品

c 直接输入

?
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
inputNum:function(e){
var num = e.detail.value;
this.setData({goodsNum:num})
},
numIputBlur:function(e){
var that = this;
var num = that.data.goodsNum;
var index = e.currentTarget.dataset.index;
var newList = that.data.slideProductList
if (num == "") { //判空
newList[index].num = 1;
that.setData({
slideProductList: newList
})
}else if (num < 1) {
that.setData({
goodsNum: newList[index].num,
slideProductList: newList
})
wx.showToast({
title: 亲，该宝贝不能减少了哦~,
icon: none
})
}else if(num>99){
that.setData({
goodsNum: newList[index].num,
slideProductList: newList
})
wx.showToast({
title: 亲，该宝贝最多购买99件哦~,
icon: none
})
}else{
newList[index].num = num;
that.setData({
slideProductList: newList
})
}
that.countNum()
that.count()
},

3. 计算结算商品金额

?
1
2
3
4
5
6
7
8
9
10
11
12
13
count: function () {//计算金额方法
var that = this
var newList = that.data.slideProductList
var newCount = 0
for (var i = 0; i < newList.length; i++) {
if (newList[i].select == "success") {
newCount += newList[i].num * newList[i].price
}
}
that.setData({
count: newCount
})
},

4. 页面左滑动删除商品

功能后续整理

4. 具体实现代码

1.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
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
<view class="product-container">
<view class="product-list" style=height:{{height}}px>
<view class="product-item" wx:for="{{slideProductList}}" wx:for-index="index" wx:key=slideProductList>
<slide-delete pid="{{item.id}}" bindaction="handleSlideDelete" wx:key=slideProductList>
<view class="product-item-wrap">
<icon type="{{item.select}}" size="19" data-index="{{index}}" data-select="{{item.select}}" bindtap="change" color="red" />
<view class="product_img">
<image src="{{item.url}}" class=goods-img mode="widthFix"></image>
</view>
<view class="product-movable-item">
<view class="goods-name">{{item.name}}</view>
<view class="goods-type">最新款
<text>{{item.style}}</text>
</view>
<view class="goods-price">￥{{item.price}}</view>
</view>
<view class="product-movable-item product-movable-item-amount">
<view class="num-box">
<view class="btn-groups">
<button class="goods-btn btn-minus" data-index="{{index}}" data-num="{{item.num}}" bindtap="subtraction">—</button>
<input class=num type=number data-index="{{index}}" bindblur="numIputBlur" bindinput=inputNum value={{item.num}}></input>
<button class="goods-btn btn-add" data-index="{{index}}" data-num="{{item.num}}" bindtap="addtion">+</button>
</view>
</view>
</view>
</view>
</slide-delete>
</view>
</view>
<view class="cart-fixbar">
<view class="allSelect">
<icon type="{{allSelect}}" size="19" data-select="{{allSelect}}" bindtap="allSelect" color=#fff />
<view class="allSelect-text">全选</view>
</view>
<view class="count">
<text>合计：</text>￥{{count}}
</view>
<view class="order">
<view class="orders">
去结算
<text class="allnum">({{num}})</text>
</view>
</view>
</view>
</view>
<view class="footer">
<navigator class="ft_item" url="../shoping/shoping" hover-class="none" open-type=redirect>
<image src="../../image/sy_1.png"></image>
<view class="item_title">首页</view>
</navigator>
<navigator url="../classification/classification" hover-class="none" open-type=redirect class="ft_item">
<image src="../../image/fl_1.png"></image>
<view class="item_title">分类</view>
</navigator>
<view class="ft_item">
<image src="../../image/gwc.png"></image>
<view class="item_title">购物车</view>
</view>
<navigator hover-class="none" url="../my/my" open-type=redirect class="ft_item">
<image src="../../image/gr_1.png"></image>
<view class="item_title">我的</view>
</navigator>
</view>

2.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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
goodsNum:,
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse(button.open-type.getUserInfo),
slideProductList: [
{
id:1,
name: 智能手环1111111112222211,
url: "../../image/bracelet.jpg",
style: "2代",
price: "149.5",
select: "circle",
num: "1",
code: "0001",
amount: 500
},
{
id: 2,
name: "指环支架",
url: "../../image/ring.jpg",
style: "金色",
price: "19.9",
select: "circle",
code: "0002",
num: "1",
amount: 500
},
{
id: 3,
name: "新款平板电脑",
url: "../../image/iphone.png",
style: "9.7英寸",
price: "100",
select: "circle",
code: "0003",
num: "1",
amount: 110
},
{
id: 4,
code: "0001",
name: "无人机",
url: "../../image/uav.jpg",
style: "低配版",
price: "4999",
select: "circle",
code: "0004",
num: "1",
amount: 200
},
{
id: 5,
code: "0001",
name: "无人机",
url: "../../image/uav.jpg",
style: "低配版",
price: "4999",
select: "circle",
code: "0004",
num: "1",
amount: 200
},
{
id: 6,
code: "0001",
name: "无人机",
url: "../../image/uav.jpg",
style: "低配版",
price: "4999",
select: "circle",
code: "0004",
num: "1",
amount: 200
},
],
allSelect: "circle",
num: 0,
count: 0,
lastX: 0,
lastY: 0,
text: "没有滑动",
},
change: function (e) {
var that = this
var index = e.currentTarget.dataset.index
var select = e.currentTarget.dataset.select
if (select == "circle") {
var stype = "success"
} else {
var stype = "circle"
}
var newList = that.data.slideProductList
newList[index].select = stype
that.setData({
slideProductList: newList
})
that.countNum()
that.count()
},
addtion: function (e) {
var that = this
var index = e.currentTarget.dataset.index
var num = e.currentTarget.dataset.num
//默认99件
if (num < 99) {
num++
}
var newList = that.data.slideProductList
newList[index].num = num
that.setData({
goodsNum:num,
slideProductList: newList
})
that.countNum()
that.count()
},
inputNum:function(e){
var num = e.detail.value;
this.setData({
goodsNum:num
})
},
numIputBlur:function(e){
var that = this
var num = that.data.goodsNum
var index = e.currentTarget.dataset.index
var newList = that.data.slideProductList
if (num == "") { //盘空
newList[index].num = 1;
that.setData({
slideProductList: newList
})
}else if (num < 1) {
that.setData({
goodsNum: newList[index].num,
slideProductList: newList
})
wx.showToast({
title: 亲，该宝贝不能减少了哦~,
icon: none
})
}else if(num>99){
that.setData({
goodsNum: newList[index].num,
slideProductList: newList
})
wx.showToast({
title: 亲，该宝贝最多购买99件哦~,
icon: none
})
}else{
newList[index].num = num;
that.setData({
slideProductList: newList
})
}
that.countNum()
that.count()
},
//减法
subtraction: function (e) {
var that = this
var index = e.currentTarget.dataset.index
var num = e.currentTarget.dataset.num
var newList = that.data.slideProductList
if (num == 1) {//当数量为1件时，再次点击移除该商品
newList.splice(index, 1)
} else {
num--
newList[index].num = num
}
that.setData({
goodsNum: num,
slideProductList: newList
})
that.countNum()
that.count()
},
//全选
allSelect: function (e) {
var that = this
var allSelect = e.currentTarget.dataset.select //先判断是否选中
var newList = that.data.slideProductList
console.log(newList)
if (allSelect == "circle") {
for (var i = 0; i < newList.length; i++) {
newList[i].select = "success"
}
var select = "success"
} else {
for (var i = 0; i < newList.length; i++) {
newList[i].select = "circle"
}
var select = "circle"
}
that.setData({
slideProductList: newList,
allSelect: select
})
that.countNum()
that.count()
},
countNum: function () { //计算数量
var that = this
var newList = that.data.slideProductList
var allNum = 0
for (var i = 0; i < newList.length; i++) {
if (newList[i].select == "success") {
allNum += parseInt(newList[i].num)
}
}
parseInt
that.setData({
num: allNum
})
},
count: function () {//计算金额方法
var that = this
var newList = that.data.slideProductList
var newCount = 0
for (var i = 0; i < newList.length; i++) {
if (newList[i].select == "success") {
newCount += newList[i].num * newList[i].price
}
}
that.setData({
count: newCount
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var width=wx.getSystemInfoSync().windowWidth
var height=wx.getSystemInfoSync().windowHeight
height=height-55-53;
this.setData({
height:height
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})

3.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
.cart-box .item {display:flex;flex-direction:row;align-items:center;padding:20rpx;border-top:8rpx solid #f0f3fa;}
.cart-box .item .goods-info {margin-left:20rpx;}
.goods-img {width:160rpx;margin-left:20rpx;height:160rpx;}
.cart-box .row {color:#fff;display:flex;flex-direction:row;width:430rpx;justify-content:space-between;margin-bottom:10rpx;}
.goods-name {font-size:32rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;padding-bottom:10rpx;width:290rpx;}
.goods-price {font-size:32rpx;color:#e02e24;position:relative;top:14rpx;}
.goods-type {color:#999;font-size:24rpx;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:240rpx;padding-bottom:10rpx;}
.num-box {display:flex;flex-direction:row;justify-content:flex-end;position:relative;top:6rpx;}
.goods-btn {width:44rpx;height:44rpx;padding:0;line-height:40rpx;font-weight:400;color:#fff;margin:0;background:#e60a30;border-radius:50%;}
.num {color:#999;width:50rpx;margin-left:5rpx;margin-right:5rpx;text-align:center;line-height:50rpx;font-size:30rpx;}
.btn-add {font-size:36rpx;}
.btn-minus {font-size:18rpx;background:#f8babb;}
.btn-groups {display:flex;flex-direction:row;justify-content:flex-end;background:#f4f4f4;padding:2rpx;border-radius:10rpx;}
.cart-fixbar {position:fixed;bottom:113rpx;background:#e60a30;height:106rpx;width:95%;margin:0 20rpx;display:flex;flex-direction:row;align-items:center;border-top-left-radius:20rpx;border-top-right-radius:20rpx;}
.cart-box .item:last-child {border-bottom:8rpx solid #f0f3fa;}
.cart-fixbar .allSelect {display:flex;flex-direction:row;height:106rpx;align-items:center;color:#fff;font-size:32rpx;margin-left:20rpx;}
.cart-fixbar .allSelect-text {margin-left:16rpx;font-size:28rpx;}
.cart-fixbar .count {color:#fff;font-size:36rpx;position:absolute;right:220rpx;display:flex;align-items:center;}
.cart-fixbar .count text {font-size:28rpx;}
.cart-fixbar .order {color:#e02e24;height:58rpx;background:#fff;line-height:58rpx;position:absolute;right:0;margin:0 20rpx;font-size:28rpx;border-radius:10rpx;}
.cart-fixbar .orders {padding:0 18rpx;}
.cart-fixbar .allnum {font-size:28rpx;}
.row_boxs {display:flex;align-items:center;}
.goods-type {flex:1;}
.goods-type text {padding-right:10rpx;}
.section {padding-bottom:220rpx;}
.footer {border-top:1rpx solid #eee;position:fixed;bottom:0;width:100%;display:flex;background:#fff;font-size:24rpx;height:55px;align-items:center;}
.footer .ft_item {width:25%;text-align:center;}
.footer .ft_item image {width:44rpx;height:44rpx;margin-top:10rpx;}
.footer .ft_item:nth-child(3) .item_title {color:#e60a30;}
.section_img {width:110rpx;height:110rpx;}
.section_boxs {text-align:center;margin:50% auto 0;}
.cart-box_p,.section_p {text-align:center;font-size:26rpx;padding-top:10rpx;color:#999;}
.cart-box_p {padding-top:60rpx;}
.cart-box_p text {border:1rpx solid #eee;padding:10rpx 24rpx;letter-spacing:1rpx;}
.title {margin:60rpx 0 30rpx;font-size:40rpx;text-align:center;font-weight:bold;color:#383a3d;}
.product-list .product-item {position:relative;width:100vw;border-bottom:10rpx solid #f0f3fa;box-sizing:border-box;background:#fff;z-index:999;}
.slide-product-list .slide-product-item {position:relative;width:100vw;border-bottom:2rpx solid #e9e9e9;box-sizing:border-box;background:#fff;z-index:999;}
.product-list .product-item movable-area {height:120rpx;width:calc(100vw - 120rpx);}
.product-list .product-item movable-view {height:120rpx;width:100vw;background:#fff;z-index:999;}
.product-list .product-item:first-child {border-top:10rpx solid #f0f3fa;}
.product-list .product-item .delete-btn {position:absolute;top:0;bottom:0;right:0;width:120rpx;font-family:PingFangSC-Regular;font-size:24rpx;color:#fff;line-height:120rpx;z-index:1;background:#e66671;text-align:center;}
.product-list .product-item-wrap {position:relative;display:flex;align-items:center;padding:8rpx 0 20rpx 20rpx;box-sizing:border-box;}
.product-list .product-item-wrap .product-movable-item {flex:1;/* overflow:hidden;*/}
.product-list .product-item-wrap .product-movable-item-name {font-family:PingFangSC-Regular;font-size:28rpx;color:#71747a;line-height:60rpx;margin-right:10rpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.product-list .product-item-wrap .product-movable-item-code {font-family:PingFangSC-Regular;font-size:24rpx;color:#969aa3;}
.product-list .product-item-wrap .product-movable-item-amount {flex:1;padding-right:50rpx;position:relative;}
.product-list .product-item-wrap .product-movable-item-amount .amount {width:120rpx;font-size:28rpx;color:#383a3d;line-height:60rpx;}
.product-list .product-item-wrap .product-movable-item-amount .unit {position:absolute;top:0;right:30rpx;font-size:28rpx;color:#969aa3;line-height:60rpx;}
.product_img {display:flex;align-items:center;padding-right:20rpx;}
.product-list {display:block;overflow-y:auto;}
您可能感兴趣的文章:微信小程序 购物车简单实例微信小程序实战篇之购物车的实现代码示例微信小程序实现购物车功能微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能微信小程序实现购物车代码实例详解微信小程序之购物车功能微信小程序购物车、父子组件传值及calc的注意事项总结微信小程序实现简单购物车功能微信小程序利用swiper+css实现购物车商品删除功能微信小程序实现加入购物车滑动轨迹

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 示例 方法
上一篇:微信小程序实现选项卡的方法
下一篇:银行开放平台生态 - 驱动创新与数字化转型的关键
相关文章

 发表评论

暂时没有评论，来抢沙发吧~