微信小程序类似购物车列表效果，计算总共价格数量，加减商品计算，滑动删除
先看下效果图：
一个小demo，记录下。
html：
{{item.title}}
{{item.sort}}
{{item.color}}
¥ {{item.price}}
删除
共计{{add_car_num}}件商品
¥ {{price}}
马上购买
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 = this
if (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";
}
}
//获取手指触摸的是哪一个item
var 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 = this
if (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 () {
}
})