一个简单微信小程序购物车功能
首先感谢王慧永分享的文章,我直接将其中滑动的事件代码直接copy过来的。http://blog.csdn.net/u011072139/article/details/54692237
通过微信小程序方法
var datas = wx.getStorageSync("cars");
和wx.setStorageSync("cars", JSON.stringify(datas));
保存读取数据,
item界面使使用position: absolute;和z-index: 4;
实现
下面就直接贴代码了
布局:
<!--pages/sideslipDel/sideslipDel.wxml-->
<view class='container0'>
<view wx:if='{{shoppingcars.length>0}}'>
<view class='content_top'>
<text class='content_top_txt_1'>购物车</text>
</view>
<view class='content_carts'>
<block wx:for="{{shoppingcars}}" wx:for-index="idx" wx:for-item="item" wx:key="key">
<view class='shoppingcaritem'>
<view class='itemContent' bindtap='changeStatus' bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" data-index='{{idx}}' style="{{item.value.txtStyle}}">
<view class='car_icon'>
<icon type='success' color='#d5242a' size='23' wx:if='{{item.value.isChecked}}'></icon>
<icon type='circle' color='#d5242a' size='23' wx:else></icon>
</view>
<view class='image'>
<image src='{{item.value.images}}' mode='widthFix'></image>
</view>
<view class='detailmess'>
<view class='text0'>
<text>{{item.value.name}}</text>
</view>
<view class='text2'>
<view class='text2-'>
<text class='text2-0'>单价¥</text>
<text class='text2-1'>{{item.value.price}}</text>
<text class='text2-2'>/{{item.value.unit}}</text>
</view>
</view>
<view class='add_sub_item'>
<view class='add_sub'>
<image src='../../images/image_sub.png' mode='aspectFit' catchtap='btnSub' data-index='{{idx}}' />
<view class='add_sub_txt'>
<text>{{item.value.count}}</text>
</view>
<image src='../../images/image_add.png' mode='aspectFit' catchtap='btnAdd' data-index='{{idx}}' />
</view>
</view>
</view>
</view>
<view class='itemDel'>
<view bindtap="delItem" class="delItem" data-index='{{idx}}'>删除</view>
</view>
</view>
</block>
</view>
</view>
</view>
样式:
/* pages/sideslipDel/sideslipDel.wxss */
.container0 {
height: 100%;
overflow-x: hidden;
font-family: PingFangSC-Light, helvetica, 'Heiti SC';
}
/* **************goodsitem ***************************/
.content_top {
border-bottom: #e5e5e5 solid 10rpx;
width: 98%;
height: 60rpx;
line-height: 60rpx;
margin-right: auto;
margin-left: auto;
vertical-align: middle;
font-size: 0.925rem;
}
.content_top_txt_1 {
float: right;
}
.content_carts {
position: relative;
width: 100%;
height: 100%;
border-bottom: #e5e5e5 solid 10rpx;
overflow: hidden;
}
.shoppingcaritem {
margin-left: auto;
margin-right: auto;
background: white;
width: 100%;
height: 190rpx;
/* border-radius: 10rpx; */
text-align: center;
border-bottom: #e5e5e5 solid 2rpx;
position: relative;
overflow: hidden;
}
.itemContent {
width: 100%;
position: absolute;
top: 0;
background-color: #fff;
z-index: 5;
padding: 0 10rpx;
transition: left 0.2s ease-in-out;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border:#7cba23 solid thin;
}
.itemDel {
position: absolute;
background-color: #e64340;
height: 190%;
width: 180rpx;
line-height: 190rpx;
vertical-align: middle;
text-align: center;
z-index: 4;
top: 0;
right: 0;
color: #fff;
}
.car_icon {
width: 10%;
height: 180rpx;
line-height: 180rpx;
vertical-align: top;
display: inline-block;
}
.car_icon icon {
margin-right: 20rpx;
}
.shoppingcaritem .image {
width: 170rpx;
display: inline-block;
height: 170rpx;
margin-bottom: 10rpx;
margin-top: 10rpx;
padding-left: 5rpx;
padding-right: 5rpx;
}
.image image {
width: 100%;
display: inline-block;
}
.detailmess {
padding-left: 10rpx;
width: 60%;
height: 100%;
float: right;
vertical-align: top;
}
.detailmess text {
width: 100%;
display: inline-block;
text-align: left;
font-size: 28rpx;
color: #000;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.text0 text {
width: 100%;
display: inline-block;
margin-top: 20rpx;
font-size: 32rpx;
color: #434342;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: middle;
text-align: left;
font-weight: 550;
}
.text2 {
width: 100%;
display: inline-block;
}
.text2- {
float: left;
padding-top: 10rpx;
vertical-align: middle;
}
.text2 text {
display: inline;
font-size: 26rpx;
color: #9d9d9d;
text-align: left;
}
.text2 .text2-0 {
color: #434342;
font-weight: 550;
}
.text2 .text2-2 {
color: #434342;
font-weight: 550;
}
.text2 .text2-1 {
color: #d5242a;
font-size: 30rpx;
}
.text2 .text2-3 {
margin-left: 10rpx;
color: white;
background-color: brown;
font-size: 0.555rem;
}
.add_sub_top {
border: gray solid 0.2rpx;
font-size: 0.725rem;
color: #a5a5a5;
float: left;
padding-left: 10rpx;
padding-right: 10rpx;
max-width: 50%;
overflow-x: hidden;
}
.add_sub_top text {
height: 50rpx;
line-height: 50rpx;
vertical-align: middle;
}
.add_sub {
width: 200rpx;
height: 50rpx;
line-height: 50rpx;
vertical-align: middle;
float: right;
text-align: center;
}
.add_sub_txt {
height: 50rpx;
line-height: 50rpx;
vertical-align: top;
display: inline-block;
padding-left: 15rpx;
padding-right: 15rpx;
}
.add_sub_txt text {
font-size: 1.0rem;
}
.add_sub image {
height: 40rpx;
width: 40rpx;
margin: 5rpx;
display: inline-block;
/* border: red solid thin; */
}
/* *******以上*******goodsitem ***************************/
代码逻辑部分
const util = require('../../utils/util.js');
Page({
/**
* 页面的初始数据
*/
data: {
shoppingcars: [],//购物车数据集合
delBtnWidth: 180,//删除按钮宽度
isItemClikeAble: true
},
// 购物车中的item是否被选中-改变状态
changeStatus: function (event) {
console.log(this.data.isItemClikeAble);
if (this.data.isItemClikeAble) {
var that = this;
var idx = event.currentTarget.dataset.index;
if (that.data.shoppingcars[idx].value.isChecked) {
that.data.shoppingcars[idx].value.isChecked = false;
}
else {
that.data.shoppingcars[idx].value.isChecked = true;
}
this.setData({
shoppingcars: that.data.shoppingcars
});
}
},
// 加入购物车
btnAdd: function (event) {
var idx = event.currentTarget.dataset.index;
var shoppingcar = this.data.shoppingcars[idx];
console.log("btnAdd");
console.log(shoppingcar);
util.saveCarData1(shoppingcar, shoppingcar.value.count + 1);
try {
wx.getStorageSync("cars");
this.setData({
shoppingcars: JSON.parse(wx.getStorageSync("cars")),
});
} catch (e) {
this.setData({
shoppingcars: [],
});
}
},
//移除购物车
btnSub: function (event) {
var idx = event.currentTarget.dataset.index;
var shoppingcar = this.data.shoppingcars[idx];
console.log("btnSub");
console.log(shoppingcar);
util.saveCarData1(shoppingcar, shoppingcar.value.count - 1);
try {
wx.getStorageSync("cars");
this.setData({
shoppingcars: JSON.parse(wx.getStorageSync("cars")),
});
} catch (e) {
this.setData({
shoppingcars: [],
});
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
* 在这里,如果本地数据为空,就加入两天数据,方便查看
*/
onShow: function () {
let str = [{ "key": "41", "value": { "name": "小白兔", "id": 41, "isChecked": true, "images": "../../images/002.jpg", "price": 19.5, "unit": "斤", "count": 1 } }, { "key": "40", "value": { "name": "大白兔", "id": 40, "isChecked": true, "images": "../../images/003.jpg", "price": 31.5, "unit": "斤", "count": 1 } }];
try {
wx.getStorageSync("cars");
this.setData({
shoppingcars: JSON.parse(wx.getStorageSync("cars")),
});
if (this.data.shoppingcars.length == 0) {
this.setData({
shoppingcars: str,
});
wx.setStorageSync("cars", JSON.stringify(str));
}
} catch (e) {
this.setData({
shoppingcars: str,
});
wx.setStorageSync("cars", JSON.stringify(str));
}
// }
initdata(this);
console.log(this.data.shoppingcars);
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
/**
* bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE"
* 分别是按下》》移动》》抬起事件
*/
touchS: function (e) {
console.log(e.touches[0].clientX);
if (e.touches.length == 1) {
this.setData({
//设置触摸起始点水平方向位置
startX: e.touches[0].clientX
});
}
},
touchM: function (e) {
var that = this
initdata(that)
if (e.touches.length == 1) {
//手指移动时水平方向位置
var moveX = e.touches[0].clientX;
//手指起始点位置与移动期间的差值
var disX = this.data.startX - moveX;
console.log(disX);
var delBtnWidth = this.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";
}
}
//获取手指触摸的是哪一项
var index = e.currentTarget.dataset.index;
var list = this.data.shoppingcars;
console.log("list", list[index]);
list[index].value.txtStyle = txtStyle;
//更新列表的状态
this.setData({
shoppingcars: list
});
}
},
touchE: function (e) {
if (e.changedTouches.length == 1) {
//手指移动结束后水平位置
var endX = e.changedTouches[0].clientX;
//触摸开始与结束,手指移动的距离
var disX = this.data.startX - endX;
var delBtnWidth = this.data.delBtnWidth;
//如果距离小于删除按钮的1/2,不显示删除按钮
var txtStyle = disX > delBtnWidth / 2 ? "left:-" + delBtnWidth + "rpx" : "left:0rpx";
//获取手指触摸的是哪一项
var index = e.currentTarget.dataset.index;
var list = this.data.shoppingcars;
if (list[index].value.txtStyle != undefined && list[index].value.txtStyle.indexOf("-") != -1) {
this.setData({
isItemClikeAble: false
});
} else {
this.setData({
isItemClikeAble: true
});
}
console.log("index", index);
console.log("list", list);
list[index].value.txtStyle = txtStyle;
//更新列表的状态
this.setData({
shoppingcars: list
});
}
},
//获取元素自适应后的实际宽度
getEleWidth: function (w) {
var real = 0;
try {
var res = wx.getSystemInfoSync().windowWidth;
var scale = (750 / 2) / (w / 2);//以宽度750px设计稿做宽度的自适应
// console.log(scale);
real = Math.floor(res / scale);
return real;
} catch (e) {
return false;
// Do something when catch error
}
},
initEleWidth: function () {
var delBtnWidth = this.getEleWidth(this.data.delBtnWidth);
this.setData({
delBtnWidth: delBtnWidth
});
},
//点击删除按钮事件
delItem: function (e) {
var that = this
wx.showModal({
title: '提示',
content: '是否删除?',
success: function (res) {
if (res.confirm) {
//获取列表中要删除项的下标
var index = e.currentTarget.dataset.index;
var list = that.data.shoppingcars;
//移除列表中下标为index的项
list.splice(index, 1);
//更新本地存储的购物车数据
console.log(index);
console.log(list);
wx.setStorageSync("cars", JSON.stringify(list));
//更新列表的状态
that.setData({
shoppingcars: list
});
// initdata(that);
} else {
initdata(that)
}
}
})
},
})
var initdata = function (that) {
var list = that.data.shoppingcars
for (var i = 0; i < list.length; i++) {
list[i].value.txtStyle = ""
}
that.setData({ shoppingcars: list })
}
* util.saveCarData1()方法*
function saveCarData1(item, num) {
if (num >= 0) {
var key = item.key;
var value = item.value;
value.count = num;
console.log(item);
try {
var datas = wx.getStorageSync("cars");
console.log(datas);
var jsonData = JSON.parse(datas);
// 获取json数组中key的值为item.key的json对象
var temp = jsonData.filter((p) => {
return p.key == key;
});
if (num != 0) {
if (temp.length == 1) {
temp[0].value.count = num;
} else {
jsonData.push({ "key": key, "value": value });
}
} else {
if (temp.length == 1) {
temp[0].value.count = num;
var index = jsonData.indexOf(temp[0]);
jsonData.splice(index, 1)
} else {
// jsonData.push({ "key": key, "value": value });
}
}
console.log(jsonData)
wx.setStorageSync("cars", JSON.stringify(jsonData));
} catch (e) {
if (num != 0) {
var datas = [{ "key": key, "value": value }];
wx.setStorageSync("cars", JSON.stringify(datas));
}
}
}
}
以上就是大致的全部代码了,有所不足的地方还请大家多多斧正!