推荐下载
-
2020-05-12 浏览：740
-
2020-05-06 浏览：521
-
2020-05-08 浏览：510
-
2020-04-04 浏览：505
-
2020-05-12 浏览：502
微信小程序 监听手势滑动切换页面
发布时间:2020-12-31
1.对应的xml里写上手势开始、滑动、结束的监听：view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" /view2.js: view plain copyvar touchDot = 0;//触摸时的原点 ...
1.对应的xml里写上手势开始、滑动、结束的监听：
<viewclass="touch"bindtouchstart="touchStart"bindtouchmove="touchMove"bindtouchend="touchEnd"></view>
2.js:
[javascript] view plain copy
var touchDot =0;//触摸时的原点
var time =0;// 时间记录，用于滑动时且时间小于1s则执行左右滑动
var interval ="";// 记录/清理时间记录
Page({
data:{...}
})
Page({
data:{
...
},
// 触摸开始事件
touchStart:function(e){
touchDot = e.touches[0].pageX;// 获取触摸时的原点
// 使用js计时器记录时间
interval = setInterval(function(){
time++;
},100);
},
// 触摸移动事件
touchMove:function(e){
var touchMove = 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;
},
.
.
.
})
