奈寻味导航网 » 文章资讯 » 微信小程序监听手势滑动切换页面实例详解

微信小程序监听手势滑动切换页面实例详解

2024-02-19 18:32:03 365

微信小程序监听手势滑动切换页面实例详解

1.对应的xml里写上手势开始、滑动、结束的监听：

2.js:

vartouchDot=0;//触摸时的原点
vartime=0;//时间记录，用于滑动时且时间小于1s则执行左右滑动
varinterval="";//记录/清理时间记录
Page({
data:{...}
})

Page({
data:{
...
},
//触摸开始事件
touchStart:function(e){
touchDot=e.touches[0].pageX;//获取触摸时的原点
//使用js计时器记录时间
interval=setInterval(function(){
time++;
},100);
},
//触摸移动事件
touchMove:function(e){
vartouchMove=e.touches[0].pageX;
console.log("touchMove:"+touchMove+"touchDot:"+touchDot+"diff:"+(touchMove-touchDot));
//向左滑动
if(touchMove-touchDot<=-40&&time<10){
wx.switchTab({
url:'../左滑页面/左滑页面'
});
}
//向右滑动
if(touchMove-touchDot>=40&&time<10){
console.log('向右滑动');
wx.switchTab({
url:'../右滑页面/右滑页面'
});
}
},
//触摸结束事件
touchEnd:function(e){
clearInterval(interval);//清除setInterval
time=0;
},
.
.
.
})

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

返回顶部
3162201930
czq8825@qq.com

微信小程序 监听手势滑动切换页面实例详解

热门推荐

随机推荐

微信小程序监听手势滑动切换页面实例详解