微信小程序——左右滑动切换页面事件
微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend。
这三个事件最重要的属性是pageX和pageY,表示X,Y坐标。
touchstart在触摸开始时触发事件;
touchend在触摸结束时触发事件;
touchmove触摸的过程中不断激发这个事件;
这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmove => ··· =>touchmove =>touchend。
第一步:在wxml文件中绑定事件(需要左右滑动的界面)
1
2
3
|
<
view
class
=
"container"
bindtouchstart
=
"touchStart"
bindtouchmove
=
"touchMove"
bindtouchend
=
"touchEnd"
>
// do something
</
view
>
|
第二步:在js文件中处理左右滑动逻辑
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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
var
touchDot = 0;
//触摸时的原点
var
time = 0;
// 时间记录,用于滑动时且时间小于1s则执行左右滑动
var
interval =
""
;
// 记录/清理 时间记录
var
nth = 0;
// 设置活动菜单的index
var
nthMax = 5;
//活动菜单的最大个数
var
tmpFlag =
true
;
// 判断左右华东超出菜单最大值时不再执行滑动事件
// 触摸开始事件
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){
if
(tmpFlag && nth < nthMax){
//每次移动中且滑动时不超过最大值 只执行一次
var
tmp =
this
.data.menu.map(
function
(arr, index) {
tmpFlag =
false
;
if
(arr.active){
// 当前的状态更改
nth = index;
++nth;
arr.active = nth > nthMax ?
true
:
false
;
}
if
(nth == index){
// 下一个的状态更改
arr.active =
true
;
name = arr.value;
}
return
arr;
})
this
.getNews(name);
// 获取新闻列表
this
.setData({menu : tmp});
// 更新菜单
}
}
// 向右滑动
if
(touchMove - touchDot >= 40 && time < 10){
if
(tmpFlag && nth > 0){
nth = --nth < 0 ? 0 : nth;
var
tmp =
this
.data.menu.map(
function
(arr, index) {
tmpFlag =
false
;
arr.active =
false
;
// 上一个的状态更改
if
(nth == index){
arr.active =
true
;
name = arr.value;
}
return
arr;
})
this
.getNews(name);
// 获取新闻列表
this
.setData({menu : tmp});
// 更新菜单
}
}
// touchDot = touchMove; //每移动一次把上一次的点作为原点(好像没啥用)
},
// 触摸结束事件
touchEnd:
function
(e){
clearInterval(interval);
// 清除setInterval
time = 0;
tmpFlag =
true
;
// 回复滑动事件
|
感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
原文链接:http://www.jb51.net/article/107020.htm