微信小程序开发中很多用户操作都会借鉴原生APP,众所周知原生APP中滑动切换页面,对于用户体验很好,那么使用微信小程序能不能实现呢?答案是肯定的。
首先来说说实现思路:利用touchstart、touchend事件获取用户手指滑动距离,同时监听滑动所需时间,当所需时间在一定范围内,且滑动距离够长,则算为一次成功的滑动,接下来就执行页面跳转方法。
直接上代码:
<!--index.wxml-->
<view class="class_first" bindtouchstart="touchStart" bindtouchend="touchEnd">
滑动切换页面
</view>
1
2
3
4
//index.js
var time = 0;
var touchDot = 0;//触摸时的原点
var interval = "";
var flag_hd = true;
Page({
onLoad: function () {
var that = this
},
onShow: function(){
flag_hd = true; //重新进入页面之后,可以再次执行滑动切换页面代码
clearInterval(interval); // 清除setInterval
time = 0;
},
// 触摸开始事件
touchStart: function (e) {
touchDot = e.touches[0].pageX; // 获取触摸时的原点
// 使用js计时器记录时间
interval = setInterval(function () {
time++;
}, 100);
},
// 触摸结束事件
touchEnd: function (e) {
var touchMove = e.changedTouches[0].pageX;
// 向左滑动
if (touchMove - touchDot <= -40 && time < 10 && flag_hd == true) {
flag_hd = false;
//执行切换页面的方法
console.log("向右滑动");
wx.navigateTo({
url: '../right/right'
})
}
// 向右滑动
if (touchMove - touchDot >= 40 && time < 10 && flag_hd == true) {
flag_hd = false;
//执行切换页面的方法
console.log("向左滑动");
wx.navigateTo({
url: '../left/left'
})
}
clearInterval(interval); // 清除setInterval
time = 0;
}
})
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
40
41
42
43
44
45
46
47
48
JS代码有点长,但是逻辑还是挺清晰的,如果看不懂,不妨新建个项目,将代码粘贴进去体验一下,只需要新建left、right页面即可,具体需求加以修改。
是不是很简单,快去试一试吧。