这篇文章主要介绍了微信小程序 监听手势滑动切换页面实例详解的相关资料,需要的朋友可以参考下
微信小程序 监听手势滑动切换页面实例详解
1.对应的xml里写上手势开始、滑动、结束的监听：
1 | <view class="touch" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" ></view>
|
2.js:
1 2 3 4 5 6 | var touchDot = 0;
var time = 0;
var interval = "";
Page({
data: {...}
})
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | Page({
data: {
...
},
touchStart: function (e) {
touchDot = e.touches[0].pageX;
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);
time = 0;
},
.
.
.
})
|
以上就是本文的全部内容，希望对大家的学习有所帮助。
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
暂时没有评论，来抢沙发吧~