本文实例为大家分享了微信小程序实现手势滑动的具体代码,供大家参考,具体内容如下
wxml:
& lt;视图
bindtouchstart=" touchStart "
bindtouchmove=" touchMove "
bindtouchend=皌ouchEnd”比;
& lt;/view>
index.js:
var touchStartX=0;//触摸时的原点
var touchStartY=0;//触摸时的原点
var=0;//时间记录,用于滑动时且时间小于1 s则执行左右滑动
var间隔=" ";//记录/清理时间记录
var touchMoveX=0;//x轴方向移动的距离
var touchMoveY=0;//y轴方向移动的距离
页面({//触摸开始事件
touchStart:函数(e) {
touchStartX=e.touches [0] .pageX;//获取触摸时的原点
touchStartY=e.touches [0] .pageY;//获取触摸时的原点//使用js计时器记录时间
间隔=setInterval(函数(){
时间+ +;
}, 100);
},//触摸移动事件
touchMove:函数(e) {
touchMoveX=e.touches [0] .pageX;
touchMoveY=e.touches [0] .pageY;
},//触摸结束事件
touchEnd:函数(e) {
var moveX=touchMoveX - touchStartX
var moveY=touchMoveY - touchStartY
如果(Math.sign (moveX)==1) {
moveX=moveX * 1
}
如果(Math.sign (moveY)==1) {
moveY=moveY * 1
}
如果(moveX & lt;=moveY){//上下//向上滑动
如果(touchMoveY - touchStartY & lt;=-30,,时间& lt;10){
console.log(“向上滑动”)
}//向下滑动
如果(touchMoveY - touchStartY祝辞=30,,时间& lt;10){
控制台。日志('向下滑动”);
}
其他}{//左右//向左滑动
如果(touchMoveX - touchStartX & lt;=-30,,时间& lt;10){
console.log(“左滑页面”)
}//向右滑动
如果(touchMoveX - touchStartX祝辞=30,,时间& lt;10){
console.log(“向右滑动”);
}
}
clearInterval(间隔);//清除setInterval
时间=0;
},
})
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
