wxml:
<view class="page">
<movable-area class="item-touch" wx:for="{{cartdata}}" wx:index="idx" wx:key="index">
<movable-view bindtouchstart="_touchStart" bindtouchmove="_touchMove" bindtouchend="_touchEnd" x="{{item.x}}" direction="horizontal" inertia="true" out-of-bounds="true" data-i="{{index}}" class="item-touch-list flex" data-id="touch">
{{index}}购物车商品{{item.id}}
</movable-view>
<view class="item-touch-tool">删除</view>
</movable-area>
</view>
wxss:
.page {
position: fixed;
display: flex;
flex-direction: column;
background-color: #f5f5f5;
width: 100%;
height: 100%;
border-top: 20rpx solid#f5f5f5
}
.item-touch {
display: flex;
position: relative;
margin-bottom: 20rpx;
width: calc(750rpx - 148rpx);
height: 100rpx;
line-height: 100rpx;
}
.item-touch-list {
z-index: 10;
width: 750rpx;
height: 100%;
padding-left: 30rpx;
box-sizing: border-box;
background-color: #fff;
}
.item-touch-tool {
width: 148rpx;
position: absolute;
top: 0;
bottom: 0;
left: 100%;
background-color: #f43838;
font-size: 28rpx;
line-height: 100rpx;
text-align: center;
color: #fff;
}
js:
//logs.js
const util = require('../../utils/util.js')
Page({
data: {
logs: [],
cartdata: [{ id: 1, x: 0 }, { id: 2, x: 0 }, { id: 3, x: 0 }],
startX:0,
isLeft:0,
delBtnw:148
},
_touchStart:function(e){
console.log(e);
//排除多点触摸
if(e.touches.length==1){
this.setData({
startX:e.touches[0].clientX
});
}
console.log('start'+util.formatTime(new Date()));
},
_touchMove:function(e){
},
_touchEnd:function(e){
var that=this;
console.log(e);
var cartIndex=e.currentTarget.dataset.i;
var delw=that.data.delBtnw;
if(e.changedTouches.length==1){
var endX = e.changedTouches[0].clientX-that.data.startX;
// 判断是否向左滑动
if (endX>=0){
that.setData({
isLeft:0
})
}else{
that.setData({
isLeft:1
})
}
console.log(endX);
if(Math.abs(endX)<delw/4)
{
that.xMove(cartIndex,0);
}else{
that.xMove(cartIndex,that.data.delBtnw);
}
}
},
xMove:function(i,x){
console.log(i+','+x);
var that=this;
var tempData=that.data.cartdata;
console.log(that.data.isLeft);
if(that.data.isLeft){
tempData[i].x = tempData[i].x - x;
}else
{
tempData[i].x = tempData[i].x + x;
}
that.setData({
cartdata:tempData
});
console.log('xMove:');
console.log(that.data.cartdata);
},
onLoad: function () {
}
})
