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

先看下效果图：

一个小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.js
Page({/*** 页面的初始数据*/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 () {}
})

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

微信小程序时间加法_微信小程序获取系统时间、时间戳、时间时间戳加减
微信小程序获取系统时间.时间戳.时间时间戳加减,微信小程序获取明天时间 //获取当前时间戳 var timestamp = Date.parse(new Date()); timestamp = ti ...
微信小程序获取系统时间、时间戳、时间时间戳加减
http://blog.csdn.net/ufo00001/article/details/72834437 //获取当前时间戳var timestamp = Date.parse(new Date( ...
vue小实验——小米商城购物车，合计、结算、数量加减
一.简述采用vue实现购物车的功能,主要是对购物车内的数量.价格.合计等,话不多说直接放图. 二.上代码 1.html板块这个部分每个人的布局排版都不一样你们可以适当参考,可能我的布局显得很臃肿 ...
微信小程序实现购物车功能，包含完整小程序代码和运行效果截图
微信小程序实现购物车功能,在商场比较常见,今天刚刚做好,效果不错. 下面从js文件,json文件,wxml文件和wxss文件,分享给大家. 直接上代码: 目录 1.index.js文件内容 2.ind ...
微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
微信小程序实现购物车页面
微信小程序实现购物车页面先来弄清楚购物车的需求. 单选.全选和取消,而且会随着选中的商品计算出总价单个商品购买数量的增加和减少删除商品.当购物车为空时,页面会变为空购物车的布局根据设计图,我们 ...
微信小程序显示分页列表
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...
微信小程序实现城市选择效果(超详细)
直接进入正题首先在项目中同级创建一个components文件夹,在文件夹下创建region-picker文件夹,在该文件夹点击右键新建Component就会创建名为 region-picker.js ...
小程序 | 微信小程序实现商品分类列表
小程序 | 微信小程序实现商品分类列表一.效果展示二.代码实现  <view class="container"> <! ...

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

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

最新文章

热门文章