微信小程序监听跳跃切换页面

来源:未知 浏览 108次 时间 2021-06-15 22:11

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;

标签: 触摸touchDot滑动touchMove