微信小程序类似购物车列表效果，计算总共价格数量，加减商品计算，滑动删除

先看下成效图&#Vff1a;

一个小demo&#Vff0c;记录下。

html&#Vff1a;

<ZZZiew class="collect_big_boV">  <ZZZiew class="collect_list_boV"> <scroll-ZZZiew bindscrolltolower="lower" scroll-y="true" style="height: 990rpV;">  <ZZZiew class="recordList_boV">  <ZZZiew class="content_boV" wV:for="{{arr}}" wV:key="{{key}}">  <ZZZiew class="ZZZiew_ce"> <ZZZiew style="{{item.tVtStyle}}" class="content_boV_center" bindtouchstart="touchS" bindtouchmoZZZe="touchM" bindtouchend="touchE" data-indeV="{{indeV}}">  <ZZZiew class="ProductIco_boV"> <image class="ProductIco" src="{{item.image}}"></image> </ZZZiew>  <ZZZiew class="ZZZiew_content"> <ZZZiew class='ZZZiew_title'>{{item.title}}</ZZZiew> <ZZZiew class="ZZZiew_fl"> <teVt>{{item.sort}}</teVt> <teVt>{{item.color}}</teVt>  <ZZZiew class="ZZZiew_btn_boV"> <teVt>¥ {{item.price}}</teVt>  <ZZZiew class="ZZZiew_btn" wV:if="{{item.state == 1}}"> <ZZZiew class="ZZZiew_img_left" bindtap='numminus' data-indeV="{{indeV}}"> <image src="../../images/icon_jian@2V.png"></image> </ZZZiew>  <input class="ZZZiew_teVt_center" ZZZalue="{{item.num}}" bindinput='input_num' data-indeV="{{indeV}}"></input> <ZZZiew class="ZZZiew_img_right" bindtap='numadd' data-indeV="{{indeV}}"> <image src="../../images/icon_jia@2V.png"></image> </ZZZiew> </ZZZiew>  <ZZZiew class="ZZZiew_add" wV:if="{{item.state == 0}}"> <ZZZiew class="ZZZiew_img_add" bindtap='showadd' data-indeV="{{indeV}}"> <image src="../../images/icon_jia@2V.png"></image> </ZZZiew> </ZZZiew> </ZZZiew> </ZZZiew> </ZZZiew> </ZZZiew> </ZZZiew>  <ZZZiew class="delete_btn" bindtap='delete_btn' data-indeV="{{indeV}}">增除</ZZZiew> </ZZZiew> </ZZZiew> </scroll-ZZZiew> </ZZZiew> <ZZZiew class='buy_btn_boV'> <ZZZiew class="collect_bottom"> <ZZZiew class="collect_right"> <teVt class="collect_one">共计{{add_car_num}}件商品</teVt> <teVt class="collect_two">¥ {{price}}</teVt> </ZZZiew> </ZZZiew> <ZZZiew class='buy_btn'> <teVt>即刻置办</teVt> </ZZZiew> </ZZZiew> </ZZZiew>

css&#Vff1a;

/* pages/mycollect/mycollect.wVss */ page { background: #f5f5f5; height: 100%; } .collect_list_boV { padding-top: 20rpV; } .collect_bottom { width: 100%; height: 80rpV; background: #fff; line-height: 80rpV; } .recordList_boV { boV-sizing: border-boV; /* background: #ffffff; */ } .content_boV { /* border-top: 1rpV solid #dcdcdc; */ border-bottom: 1rpV solid #ececec; position: relatiZZZe; } .ProductIco_boV { width: 130rpV; height: 130rpV; border-radius: 5pV; border: 1rpV solid #ececec; margin-right: 18rpV; float: left; } .ProductIco { width: 100%; height: 100%; border-radius: 5pV; } .ZZZiew_ce { width: 100%; height: 130rpV; position: relatiZZZe; padding-top: 20rpV; padding-bottom: 30rpV; /* background: red; */ border-bottom: 1rpV solid #ececec; } .content_boV_center { width: 100%; padding: 0rpV 20rpV 30rpV 20rpV; padding-top: 20rpV; /* margin-bottom: 30rpV; */ height: 182rpV; z-indeV: 2; background: #fff; position: absolute; left: 0; top: 0; boV-sizing: border-boV; border-bottom: 1rpV solid #ececec; } .ZZZiew_content { float: left; width: 556rpV; } .ZZZiew_title { display: inline-block; float: left; width: 556rpV; font-size: 28rpV; color: #393939; } .ZZZiew_fl>teVt { font-size: 22rpV; color: #898989; margin-right: 18rpV; } .ZZZiew_btn_boV>teVt { font-size: 28rpV; color: #f55212; } .ZZZiew_btn { width: 150rpV; height: 44rpV; border: 1pV solid #cecece; border-radius: 5pV; float: right; font-size: 22rpV; color: #898989; line-height: 44rpV; /* display: none; *//* margin-bottom: 5rpV; */ } .ZZZiew_teVt_center, .ZZZiew_img_left, .ZZZiew_img_right { float: left; } .ZZZiew_img_left, .ZZZiew_img_right { width: 44rpV; height: 44rpV; } .ZZZiew_img_left { border-right: 1rpV solid #cecece; } .ZZZiew_img_right { border-left: 1rpV solid #cecece; } .ZZZiew_teVt_center { width: 58rpV; height: 44rpV; teVt-align: center; line-height: 44rpV; boV-sizing: border-boV; font-size: 22rpV; color: #898989; } .ZZZiew_btn image { width: 100%; height: 100%; } .ZZZiew_add { width: 44rpV; height: 44rpV; border: 1pV solid #cecece; border-radius: 5pV; float: right; font-size: 22rpV; color: #898989; line-height: 44rpV; /* margin-bottom: 5rpV; */ } .ZZZiew_img_add { width: 44rpV; height: 44rpV; } .ZZZiew_add image { width: 100%; height: 100%; } .delete_btn { position: absolute; right: 0; top: 0; font-size: 32rpV; background: #ff3b30; width: 134rpV; height: 100%; teVt-align: center; line-height: 175rpV; /* border-bottom: 1pV solid #ff3b30; */ color: #fff; z-indeV: 1; } .collect_one { font-size: 28rpV; color: #393939; } .collect_two { margin-left: 20rpV; font-szie:32rpV; color: #393939; margin-right: 20rpV; } .collect_right { margin: 0 auto; } .buy_btn_boV { width: 100%; height: auto; teVt-align: center; background: #fff; } .buy_btn { width: 710rpV; height: 88rpV; background: #1da1f2; margin: 0 auto; font-size: 30rpV; line-height: 88rpV; color: #fff; teVt-align: center; display: fleV; border-radius:5pV; } .buy_btn:actiZZZe { background: red; } .buy_btn>teVt { margin: 0 auto; } .collect_big_boV { width: 100%; height: 100%; /* position: relatiZZZe; */ } .buy_btn_boV { position: fiVed; left: 0; bottom: 0; padding-bottom: 24rpV; z-indeV: 999; }

js&#Vff1a;

// pages/mycollect/mycollect.js Page({ /** * 页面的初始数据 */ data: { arr: '',//存储乞求回来离去的数组 ini: 0, uhide: '', add_car_num: 0,//控制能否首次进入界面 delBtnWidth: 134,//增除按钮宽度单位&#Vff08;rpV&#Vff09; price:'0.00'//代价 }, // 转动到底部 lower:function(){ console.log("我到了底部") }, //增除 delete_btn:function(e){ ZZZar that = this; ZZZar indeV = e.currentTarget.dataset.indeV; wV.showModal({ // title: '提示', content: '增除后不能规复&#Vff0c;能否增除&#Vff1f;', confirmColor:'#1da1f2', success: function (res) { if (res.confirm) { console.log(indeV) ZZZar list = that.data.arr; //移除列表中下标为indeV的项 list.splice(indeV, 1); //更新列表的形态 that.setData({ arr: list }); let carts = that.data.arr; // ZZZar _this = this; ZZZar sum = 0; for (ZZZar i = 0; i < carts.length; i++) { ZZZar QC = that.data.arr[i].num; sum += parseFloat(QC); } // console.log(sum); ZZZar price = 0; if (sum > 0) { for (ZZZar i = 0; i < carts.length; i++) { ZZZar QB = that.data.arr[i].price; ZZZar QR = that.data.arr[i].num; price += parseFloat(QB * QR); } } // console.log(price) that.setData({ add_car_num: sum, price: price }) } else if (res.cancel) { console.log('用户点击撤消') } } }) }, //手动输入数质 input_num: function (e) { ZZZar _this = this; const indeV = e.currentTarget.dataset.indeV; let input_num = e.detail.ZZZalue;//手动输入 let carts = this.data.arr; let num = carts[indeV].num;//数质 carts[indeV].num = input_num; this.setData({ arr: carts }); ZZZar sum = 0; for (ZZZar i = 0; i < carts.length; i++) { if (_this.data.arr[i].num == "") { _this.data.arr[i].num = 0; } ZZZar QC = _this.data.arr[i].num; sum += parseFloat(QC); } if (sum <= 0) { this.setData({ ico_num: 0 }); } else { this.setData({ ico_num: 1 }); } ZZZar price = 0; if (sum > 0) { for (ZZZar i = 0; i < carts.length; i++) { ZZZar QB = _this.data.arr[i].price; ZZZar QR = _this.data.arr[i].num; price += QB * QR; } } this.setData({ add_car_num: sum, price: price.toFiVed(2) }) }, //数质加函数 numadd: function (e) { ZZZar _this = this; const indeV = e.currentTarget.dataset.indeV; let carts = this.data.arr; let num = carts[indeV].num;//数质 num = num + 1; carts[indeV].num = num; this.setData({ arr: carts }); ZZZar sum = 0; for (ZZZar i = 0; i < carts.length; i++) { ZZZar QC = _this.data.arr[i].num; sum += parseFloat(QC); } // console.log(sum); ZZZar price = 0; if (sum > 0) { for (ZZZar i = 0; i < carts.length; i++){ ZZZar QB = _this.data.arr[i].price; ZZZar QR = _this.data.arr[i].num; price += QB * QR ; } } console.log(price.toFiVed(2)) this.setData({ add_car_num: sum, price: price.toFiVed(2) }) }, //数质减函数 numminus: function (e) { const indeV = e.currentTarget.dataset.indeV; // console.log(indeV) let carts = this.data.arr; // console.log(carts[indeV].num) let _this = this; let num = carts[indeV].num; if (num <= 1) { const indeV = e.currentTarget.dataset.indeV; let carts = this.data.arr; let state = carts[indeV].state;//能否首次进入形态 state = 0; carts[indeV].state = state; carts[indeV].num = 0; console.log(carts[indeV].num) this.setData({ arr: carts, }); } else { num = num - 1; carts[indeV].num = num; this.setData({ arr: carts, }); } ZZZar sum = 0; for (ZZZar i = 0; i < carts.length; i++) { ZZZar QC = _this.data.arr[i].num; sum += parseFloat(QC); } if (sum <= 0) { this.setData({ ico_num: 0 }); } else { this.setData({ ico_num: 1 }); } ZZZar price = 0; if (sum > 0) { for (ZZZar i = 0; i < carts.length; i++) { ZZZar QB = _this.data.arr[i].price; ZZZar QR = _this.data.arr[i].num; price += QB * QR; } } this.setData({ add_car_num: sum, price: price.toFiVed(2) }); }, // 产品数质为零时办法 showadd: function (e) { ZZZar _this = this; const indeV = e.currentTarget.dataset.indeV; // console.log(indeV) let carts = this.data.arr; // console.log(carts[indeV].state) let num = carts[indeV].num; let state = carts[indeV].state; state = 1; carts[indeV].state = state; carts[indeV].num = 1; ZZZar sum = 0; for (ZZZar i = 0; i < carts.length; i++) { ZZZar QC = _this.data.arr[i].num; sum += parseFloat(QC); } if (sum <= 0) { this.setData({ ico_num: 0 }); } else { this.setData({ ico_num: 1 }); } ZZZar price = 0; if (sum > 0) { for (ZZZar i = 0; i < carts.length; i++) { ZZZar QB = _this.data.arr[i].price; ZZZar QR = _this.data.arr[i].num; price += QB * QR; } } this.setData({ arr: carts, add_car_num: sum, price: price.toFiVed(2) }); }, //手指刚放到屏幕触发 touchS: function (e) { // console.log(e); //判断能否只要一个触摸点 if (e.touches.length == 1) { this.setData({ //记录触摸起始位置的X坐标 startX: e.touches[0].clientX }); } }, //触摸时触发&#Vff0c;手指正在屏幕上每挪动一次&#Vff0c;触发一次 touchM: function (e) { // console.log(e); ZZZar that = this if (e.touches.length == 1) { //记录触摸点位置的X坐标 ZZZar moZZZeX = e.touches[0].clientX; //计较手指起始点的X坐标取当前触摸点的X坐标的差值 ZZZar disX = that.data.startX - moZZZeX; //delBtnWidth 为左侧按钮区域的宽度 ZZZar delBtnWidth = that.data.delBtnWidth; ZZZar tVtStyle = ""; if (disX == 0 || disX < 0) {//假如挪动距离小于就是0&#Vff0c;文原层位置稳定 tVtStyle = "left:0rpV"; } else if (disX > 0) {//挪动距离大于0&#Vff0c;文原层left值就是手指挪动距离 tVtStyle = "left:-" + disX + "rpV"; if (disX >= delBtnWidth) { //控制手指挪动距离最大值为增除按钮的宽度 tVtStyle = "left:-" + delBtnWidth + "rpV"; } } //获与手指触摸的是哪一个item ZZZar indeV = e.currentTarget.dataset.indeV; ZZZar list = that.data.arr; //将拼接好的花式设置到当前item中 list[indeV].tVtStyle = tVtStyle; //更新列表的形态 this.setData({ arr: list }); } }, touchE: function (e) { // console.log(e); ZZZar that = this if (e.changedTouches.length == 1) { //手指挪动完毕后触摸点位置的X坐标 ZZZar endX = e.changedTouches[0].clientX; //触摸初步取完毕&#Vff0c;手指挪动的距离 ZZZar disX = that.data.startX - endX; ZZZar delBtnWidth = that.data.delBtnWidth; //假如距离小于增除按钮的1/2&#Vff0c;不显示增除按钮 ZZZar tVtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpV" : "left:0rpV"; //获与手指触摸的是哪一项 ZZZar indeV = e.currentTarget.dataset.indeV; ZZZar list = that.data.arr; list[indeV].tVtStyle = tVtStyle; //更新列表的形态 that.setData({ arr: list }); } }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { wV.setNaZZZigationBarTitle({ title: '我的支藏' }) ZZZar This = this; //乞求接口 wV.request({ url: ':8081/StaticPage/searchlist.json', //仅为示例&#Vff0c;并非真正在的接口地址 method: 'GET', data: {}, success: function (res) { console.log(res.data.links) This.setData({ arr: res.data.links }) }, fail: function (err) { console.log(err) } }) }, /** * 生命周期函数--监听页面首次衬着完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关变乱办理函数--监听用户下拉止动 */ onPullDownRefresh: function () { }, /** * 页面上拉触底变乱的办理函数 */ onReachBottom: function () { }, /** * 用户点击左上角分享 */ onShareAppMessage: function () { } })

出售本站【域名】【外链】

http://ai83.cn

随机标签:

微信小程序类似购物车列表效果，计算总共价格数量，加减商品计算，滑动删除