微信小程序实现手势滑动效果
本文实例为大家分享了微信小程序实现手势滑动的具体代码，供大家参考，具体内容如下
wxml:
index.js:
vartouchStartX=0;//触摸时的原点
vartouchStartY=0;//触摸时的原点
vartime=0;//时间记录，用于滑动时且时间小于1s则执行左右滑动
varinterval="";//记录/清理时间记录
vartouchMoveX=0;//x轴方向移动的距离
vartouchMoveY=0;//y轴方向移动的距离
Page({
//触摸开始事件
touchStart:function(e){
touchStartX=e.touches[0].pageX;//获取触摸时的原点
touchStartY=e.touches[0].pageY;//获取触摸时的原点
//使用js计时器记录时间
interval=setInterval(function(){
time++;
},100);
},
//触摸移动事件
touchMove:function(e){
touchMoveX=e.touches[0].pageX;
touchMoveY=e.touches[0].pageY;
},
//触摸结束事件
touchEnd:function(e){
varmoveX=touchMoveX-touchStartX
varmoveY=touchMoveY-touchStartY
if(Math.sign(moveX)==-1){
moveX=moveX*-1
}
if(Math.sign(moveY)==-1){
moveY=moveY*-1
}
if(moveX<=moveY){//上下
//向上滑动
if(touchMoveY-touchStartY<=-30&&time<10){
console.log("向上滑动")
}
//向下滑动
if(touchMoveY-touchStartY>=30&&time<10){
console.log('向下滑动');
}
}else{//左右
//向左滑动
if(touchMoveX-touchStartX<=-30&&time<10){
console.log("左滑页面")
}
//向右滑动
if(touchMoveX-touchStartX>=30&&time<10){
console.log('向右滑动');
}
}
clearInterval(interval);//清除setInterval
time=0;
},
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。