实现小程序左右滑动操作
wxml，在当前view层滑动操作文章来源：https://www.toymoban.com/news/detail-507984.html
<view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" animation="{{ani}}">
data数据文章来源地址https://www.toymoban.com/news/detail-507984.html
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
}
//....移动成功，执行方法
},
到了这里，关于微信小程序 左右滑动方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
