这篇文章主要介绍了微信小程序监听手势滑动切换页面的示例，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站制作、网站设计、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的
盱眙网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
微信小程序 监听手势滑动切换页面
1.对应的xml里写上手势开始、滑动、结束的监听：
2.js:
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;
},
.
.
.
})感谢你能够认真阅读完这篇文章，希望小编分享的“微信小程序监听手势滑动切换页面的示例”这篇文章对大家有帮助，同时也希望大家多多支持创新互联网站建设公司，，关注创新互联行业资讯频道，更多相关知识等着你来学习!
当前标题：微信小程序监听手势滑动切换页面的示例-创新互联
本文来源：
http://www.cdkjz.cn/article/ddpigh.html
