微信小程序购物车功能实现（干货满满）
风泽木 时间：2022-09-04
微信小程序定制好看的购物车页面，实现购物车功能，希望对您有所帮助！
1. 应用场景
2. 思路分析
3. 代码分析
4. 具体实现代码
效果截图：
1.应用场景
适用于商城、秒杀、商品购买等类型的小程序，负责将顾客浏览的商品保存下来，方便客户集中比较商品与购买商品。
2.思路分析
实现购物车功能前请思考以下问题：
1.小程序如何布局？使用什么布局能提升页面开发效率？？
2.将购物车功能分为四个小功能：(1)一键全选/取消商品 （2）动态添加商品可手动输入 （3）计算结算商品金额 （4）左滑动删除商品
答：（1）在小程序中主要是兼容安卓与ios两种型号手机，在页面开发中可使用flex布局，能极大的提高页面的开发效率。（2）请仔细阅读代码分析，看懂自己也可轻松实现购物车功能 so easy！！！
3.代码分析
1. 一键全选/取消
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()//计算商品金额 },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
2. 动态添加商品可手动输入
- a 添加商品
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() },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- b 减少商品
subtraction: function (e) {//减少商品 var that = this var index = e.currentTarget.dataset.index var num = e.currentTarget.dataset.num var newList = that.data.slideProductList //当1件时，再次点击移除该商品 if (num == 1) { newList.splice(index, 1) } else { num-- newList[index].num = num } that.setData({ goodsNum: num, slideProductList: newList }) that.countNum() that.count() },- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- c 直接输入
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() },- 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
3. 计算结算商品金额
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 }) }, - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
4. 页面左滑动删除商品
功能后续整理
4. 具体实现代码
1.wxml
<view >="product-container"> <view >="product-list" >'>"product-item" wx:for="{{slideProductList}}" wx:for-index="index" wx:key='slideProductList'> <slide-delete pid="{{item.id}}" bindaction="handleSlideDelete" wx:key='slideProductList'> <view >="product-item-wrap"> <icon type="{{item.select}}" size="19" data-index="{{index}}" data-select="{{item.select}}" bindtap="change" color="red" /> <view >="product_img"> <image src="{{item.url}}" >='goods-img' mode=">"product-movable-item"> <view >="goods-name">{{item.name}}</view> <view >="goods-type">最新款 <text>{{item.>"goods-price">￥{{item.price}}</view> </view> <view >="product-movable-item product-movable-item-amount"> <view >="num-box"> <view >="btn-groups"> <button >="goods-btn btn-minus" data-index="{{index}}" data-num="{{item.num}}" bindtap="subtraction">—</button> <input >='num' type='number' data-index="{{index}}" bindblur="numIputBlur" bindinput='inputNum' value='{{item.num}}'></input> <button >="goods-btn btn-add" data-index="{{index}}" data-num="{{item.num}}" bindtap="addtion">+</button> </view> </view> </view> </view> </slide-delete> </view> </view> <view >="cart-fixbar"> <view >="allSelect"> <icon type="{{allSelect}}" size="19" data-select="{{allSelect}}" bindtap="allSelect" color='#fff' /> <view >="allSelect-text">全选</view> </view> <view >="count"> <text>合计：</text>￥{{count}} </view> <view >="order"> <view >="orders"> 去结算 <text >="allnum">({{num}})</text> </view> </view> </view></view><view >="footer"> <navigator >="ft_item" url="../shoping/shoping" hover->="none" open-type='redirect'> <image src="../../image/sy_1.png"></image> <view >="item_title">首页</view> </navigator> <navigator url="../>="none" open-type='redirect' >="ft_item"> <image src="../../image/fl_1.png"></image> <view >="item_title">分类</view> </navigator> <view >="ft_item"> <image src="../../image/gwc.png">特别声明：本站部分内容收集于互联网是出于更直观传递信息的目的。该内容版权归原作者所有，并不代表本站赞同其观点和对其真实性负责。如该内容涉及任何第三方合法权利，请及时与824310991@qq.com联系,我们会及时反馈并处理完毕。