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

先看下效果图：

一个小demo，记录下。

html：

<!--pages/mycollect/mycollect.wxml--><!--最外层大盒子 --><view class="collect_big_box"><!--列表盒子 --><view class="collect_list_box"><scroll-view bindscrolltolower="lower" scroll-y="true" style="height: 990rpx;"><!--中部搜索结果列表盒子--><view class="recordList_box"><!--外层大盒子 --><view class="content_box" wx:for="{{arr}}" wx:key="{{key}}"><!--中部盒子 --><view class="view_ce"><view style="{{item.txtStyle}}" class="content_box_center" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index="{{index}}"><!--图片盒子 --><view class="ProductIco_box"><image class="ProductIco" src="{{item.image}}"></image></view><!--内容 --><view class="view_content"><view class='view_title'>{{item.title}}</view><view class="view_fl"><text>{{item.sort}}</text><text>{{item.color}}</text><!--价格和按钮 --><view class="view_btn_box"><text>¥ {{item.price}}</text><!--产品数量不为 0 --><view class="view_btn" wx:if="{{item.state == 1}}"><view class="view_img_left" bindtap='numminus' data-index="{{index}}"><image src="../../images/icon_jian@2x.png"></image></view><!-- <view class="view_text_center"></view> --><input class="view_text_center" value="{{item.num}}" bindinput='input_num' data-index="{{index}}"></input><view class="view_img_right" bindtap='numadd' data-index="{{index}}"><image src="../../images/icon_jia@2x.png"></image></view></view><!--产品数量为0 --><view class="view_add" wx:if="{{item.state == 0}}"><view class="view_img_add" bindtap='showadd' data-index="{{index}}"><image src="../../images/icon_jia@2x.png"></image></view></view></view></view></view></view></view><!--删除按钮 --><view class="delete_btn" bindtap='delete_btn' data-index="{{index}}">删除</view></view></view></scroll-view></view><view class='buy_btn_box'><view class="collect_bottom"><view class="collect_right"><text class="collect_one">共计{{add_car_num}}件商品</text><text class="collect_two">¥ {{price}}</text></view></view><view class='buy_btn'><text>马上购买</text></view></view></view>

css：

/* pages/mycollect/mycollect.wxss */page {background: #f5f5f5;height: 100%;}.collect_list_box {padding-top: 20rpx;}.collect_bottom {width: 100%;height: 80rpx;background: #fff;line-height: 80rpx;}.recordList_box {box-sizing: border-box;/* background: #ffffff; */}.content_box {/* border-top: 1rpx solid #dcdcdc; */border-bottom: 1rpx solid #ececec;position: relative;}.ProductIco_box {width: 130rpx;height: 130rpx;border-radius: 5px;border: 1rpx solid #ececec;margin-right: 18rpx;float: left;}.ProductIco {width: 100%;height: 100%;border-radius: 5px;}.view_ce {width: 100%;height: 130rpx;position: relative;padding-top: 20rpx;padding-bottom: 30rpx;/* background: red; */border-bottom: 1rpx solid #ececec;}.content_box_center {width: 100%;padding: 0rpx 20rpx 30rpx 20rpx;padding-top: 20rpx;/* margin-bottom: 30rpx; */height: 182rpx;z-index: 2;background: #fff;position: absolute;left: 0;top: 0;box-sizing: border-box;border-bottom: 1rpx solid #ececec;}.view_content {float: left;width: 556rpx;}.view_title {display: inline-block;float: left;width: 556rpx;font-size: 28rpx;color: #393939;}.view_fl>text {font-size: 22rpx;color: #898989;margin-right: 18rpx;}.view_btn_box>text {font-size: 28rpx;color: #f55212;}.view_btn {width: 150rpx;height: 44rpx;border: 1px solid #cecece;border-radius: 5px;float: right;font-size: 22rpx;color: #898989;line-height: 44rpx;/* display: none; *//* margin-bottom: 5rpx; */}.view_text_center, .view_img_left, .view_img_right {float: left;}.view_img_left, .view_img_right {width: 44rpx;height: 44rpx;}.view_img_left {border-right: 1rpx solid #cecece;}.view_img_right {border-left: 1rpx solid #cecece;}.view_text_center {width: 58rpx;height: 44rpx;text-align: center;line-height: 44rpx;box-sizing: border-box;font-size: 22rpx;color: #898989;}.view_btn image {width: 100%;height: 100%;}.view_add {width: 44rpx;height: 44rpx;border: 1px solid #cecece;border-radius: 5px;float: right;font-size: 22rpx;color: #898989;line-height: 44rpx;/* margin-bottom: 5rpx; */}.view_img_add {width: 44rpx;height: 44rpx;}.view_add image {width: 100%;height: 100%;}.delete_btn {position: absolute;right: 0;top: 0;font-size: 32rpx;background: #ff3b30;width: 134rpx;height: 100%;text-align: center;line-height: 175rpx;/* border-bottom: 1px solid #ff3b30; */color: #fff;z-index: 1;}.collect_one {font-size: 28rpx;color: #393939;}.collect_two {margin-left: 20rpx;font-szie:32rpx;color: #393939;margin-right: 20rpx;}.collect_right {margin: 0 auto;} .buy_btn_box {width: 100%;height: auto;text-align: center;background: #fff;}.buy_btn {width: 710rpx;height: 88rpx;background: #1da1f2;margin: 0 auto;font-size: 30rpx;line-height: 88rpx;color: #fff;text-align: center;display: flex;border-radius:5px; }.buy_btn:active {background: red;}.buy_btn>text {margin: 0 auto;}.collect_big_box {width: 100%;height: 100%;/* position: relative; */}.buy_btn_box {position: fixed;left: 0;bottom: 0; padding-bottom: 24rpx; z-index: 999;}

js：

// pages/mycollect/mycollect.jsPage({/*** 页面的初始数据*/data: {arr: '',//存储请求回来的数组ini: 0,uhide: '',add_car_num: 0,//控制是否初次进入界面delBtnWidth: 134,//删除按钮宽度单位（rpx）price:'0.00'//价钱},// 滚动到底部lower:function(){console.log("我到了底部")},//删除delete_btn:function(e){var that = this;var index = e.currentTarget.dataset.index;wx.showModal({// title: '提示',content: '删除后不能恢复，是否删除？',confirmColor:'#1da1f2',success: function (res) {if (res.confirm) {console.log(index)var list = that.data.arr;//移除列表中下标为index的项 list.splice(index, 1);//更新列表的状态 that.setData({arr: list});let carts = that.data.arr;// var _this = this;var sum = 0;for (var i = 0; i < carts.length; i++) {var QC = that.data.arr[i].num;sum += parseFloat(QC);}// console.log(sum);var price = 0;if (sum > 0) {for (var i = 0; i < carts.length; i++) {var QB = that.data.arr[i].price;var 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) {var _this = this;const index = e.currentTarget.dataset.index;let input_num = e.detail.value;//手动输入let carts = this.data.arr;let num = carts[index].num;//数量carts[index].num = input_num;this.setData({arr: carts});var sum = 0;for (var i = 0; i < carts.length; i++) {if (_this.data.arr[i].num == "") {_this.data.arr[i].num = 0;}var QC = _this.data.arr[i].num;sum += parseFloat(QC);}if (sum <= 0) {this.setData({ico_num: 0});} else {this.setData({ico_num: 1});}var price = 0;if (sum > 0) {for (var i = 0; i < carts.length; i++) {var QB = _this.data.arr[i].price;var QR = _this.data.arr[i].num;price += QB * QR;}} this.setData({add_car_num: sum,price: price.toFixed(2)})},//数量加函数numadd: function (e) {var _this = this;const index = e.currentTarget.dataset.index;let carts = this.data.arr;let num = carts[index].num;//数量num = num + 1;carts[index].num = num;this.setData({arr: carts});var sum = 0;for (var i = 0; i < carts.length; i++) {var QC = _this.data.arr[i].num;sum += parseFloat(QC);}// console.log(sum);var price = 0;if (sum > 0) {for (var i = 0; i < carts.length; i++){var QB = _this.data.arr[i].price;var QR = _this.data.arr[i].num;price += QB * QR ;}} console.log(price.toFixed(2))this.setData({add_car_num: sum,price: price.toFixed(2)})},//数量减函数numminus: function (e) {const index = e.currentTarget.dataset.index;// console.log(index)let carts = this.data.arr;// console.log(carts[index].num)let _this = this;let num = carts[index].num;if (num <= 1) {const index = e.currentTarget.dataset.index;let carts = this.data.arr;let state = carts[index].state;//是否初次进入状态state = 0;carts[index].state = state;carts[index].num = 0;console.log(carts[index].num)this.setData({arr: carts,});} else {num = num - 1;carts[index].num = num;this.setData({arr: carts,});}var sum = 0;for (var i = 0; i < carts.length; i++) {var QC = _this.data.arr[i].num;sum += parseFloat(QC);}if (sum <= 0) {this.setData({ico_num: 0});} else {this.setData({ico_num: 1});}var price = 0;if (sum > 0) {for (var i = 0; i < carts.length; i++) {var QB = _this.data.arr[i].price;var QR = _this.data.arr[i].num;price += QB * QR;}}this.setData({add_car_num: sum,price: price.toFixed(2)});},// 产品数量为零时方法showadd: function (e) {var _this = this;const index = e.currentTarget.dataset.index;// console.log(index)let carts = this.data.arr;// console.log(carts[index].state)let num = carts[index].num;let state = carts[index].state;state = 1;carts[index].state = state;carts[index].num = 1;var sum = 0;for (var i = 0; i < carts.length; i++) {var QC = _this.data.arr[i].num;sum += parseFloat(QC);}if (sum <= 0) {this.setData({ico_num: 0});} else {this.setData({ico_num: 1});}var price = 0;if (sum > 0) {for (var i = 0; i < carts.length; i++) {var QB = _this.data.arr[i].price;var QR = _this.data.arr[i].num;price += QB * QR;}}this.setData({arr: carts,add_car_num: sum,price: price.toFixed(2)});},//手指刚放到屏幕触发touchS: function (e) {// console.log(e);//判断是否只有一个触摸点if (e.touches.length == 1) {this.setData({//记录触摸起始位置的X坐标startX: e.touches[0].clientX});}},//触摸时触发，手指在屏幕上每移动一次，触发一次touchM: function (e) {// console.log(e);var that = thisif (e.touches.length == 1) {//记录触摸点位置的X坐标var moveX = e.touches[0].clientX;//计算手指起始点的X坐标与当前触摸点的X坐标的差值var disX = that.data.startX - moveX;//delBtnWidth 为右侧按钮区域的宽度var delBtnWidth = that.data.delBtnWidth;var txtStyle = "";if (disX == 0 || disX < 0) {//如果移动距离小于等于0，文本层位置不变txtStyle = "left:0rpx";} else if (disX > 0) {//移动距离大于0，文本层left值等于手指移动距离txtStyle = "left:-" + disX + "rpx";if (disX >= delBtnWidth) {//控制手指移动距离最大值为删除按钮的宽度txtStyle = "left:-" + delBtnWidth + "rpx";}}//获取手指触摸的是哪一个itemvar index = e.currentTarget.dataset.index;var list = that.data.arr;//将拼接好的样式设置到当前item中list[index].txtStyle = txtStyle;//更新列表的状态this.setData({arr: list});}},touchE: function (e) {// console.log(e);var that = thisif (e.changedTouches.length == 1) {//手指移动结束后触摸点位置的X坐标var endX = e.changedTouches[0].clientX;//触摸开始与结束，手指移动的距离var disX = that.data.startX - endX;var delBtnWidth = that.data.delBtnWidth;//如果距离小于删除按钮的1/2，不显示删除按钮var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0rpx";//获取手指触摸的是哪一项var index = e.currentTarget.dataset.index;var list = that.data.arr;list[index].txtStyle = txtStyle;//更新列表的状态that.setData({arr: list});}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.setNavigationBarTitle({title: '我的收藏'})var This = this;//请求接口wx.request({url: 'http://192.168.1.222:8081/StaticPage/searchlist.json', //仅为示例，并非真实的接口地址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 () {}})