实现小程序左右滑动操作
wxml,在当前view层滑动操作
<view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" animation="{{ani}}">
data数据
status:"0" //状态显示参数
startX:0,
endX:0,
moveFlag:true,
ani:"",
/**
* 触摸开始事件
* */
touchStart(e:any) {
this.data.startX = e.touches[0].pageX; // 获取触摸时的原点
this.data.moveFlag = true;
},
/**
* 触摸移动事件
* */
touchMove(e:any) {
this.data.endX = e.touches[0].pageX; // 获取触摸时的原点
if ( this.data.moveFlag) {
if ( this.data.endX - this.data.startX > 50) {
console.log("move right");
this.move2right();
this.data.moveFlag = false;
}
if ( this.data.startX - this.data.endX > 50) {
console.log("move left");
this.move2left();
this.data.moveFlag = false;
}
}
},
/**
* 触摸结束事件
* */
touchEnd () {
this.data.moveFlag = true; // 回复滑动事件
},
/**
* 右移,向左滑动操作
* */
move2left(){
let status = Number(this.data.status);
if (status === 2 ) { //最右,不移动
return
}
//....移动成功,执行方法
},
/**
* 左移,向右滑动操作
* */
move2right(){
let status = Number(this.data.status);
if (status === 0 ) {//最左,不移动
return
}
//....移动成功,执行方法
},