本文实例为大家分享了微信小程序实现简单购物车的具体代码,供大家参考,具体内容如下
微信小程序定制好看的购物车页面,实现购物车功能,希望对您有所帮助!
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()//计算商品金额 },
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() },
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() },
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() },
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 }) },
4. 页面左滑动删除商品
功能后续整理
4. 具体实现代码
1.wxml
<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="https://www.atool.online/article/{{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="https://www.atool.online/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="https://www.atool.online/image/fl_1.png"></image> <view class="item_title">分类</view> </navigator> <view class="ft_item"> <image src="https://www.atool.online/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="https://www.atool.online/image/gr_1.png"></image> <view class="item_title">我的</view> </navigator> </view>
2.js
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
.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;}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。