移动端滑动屏幕方向判断

121 阅读 0 评论 80 点赞

我是靠谱客的博主年轻煎蛋，这篇文章主要介绍移动端滑动屏幕方向判断，现在分享给大家，希望可以做个参考。

移动端和小程序H5开发中，经常会遇见检测用户滑动方向的需求。
记录一下实现的思路，以便以后的相似场景应用的快速开发。
监听以下touchstart、touchmove、touchend 事件。
触摸开始时，记录开始的横纵坐标。event.touches[0].pageX，event.touches[0].pageY。
触摸过程中，阻止默认行为。
触摸结束后，对于touchend事件，changedTouches 是已经从触摸面的离开的触点的集合（也就是说，手指已经离开了屏幕/触摸面）。计算在x方向和y方向的移动距离。如果Math.abs(xStart-xEnd)>Math.abs(yStart-yEnd) 则是水平滑动，反之则是垂直滑动。水平是向左还是向右？垂直是向上还是向下？这个可以做差根据正负判断，不再赘述。
注意事项：需要加节流函数去控制触发频率。
相关代码如下：

复制代码

handleTouchEvent( event ) {
            let spanX, spanY;
            switch( event.type ) {
                case 'touchstart' :
                    this.startX = event.touches[ 0 ].pageX;
                    this.startY = event.touches[ 0 ].pageY;
                    break;
                case 'touchend' :
                    spanX = event.changedTouches[ 0 ].pageX - this.startX;
                    spanY = event.changedTouches[ 0 ].pageY - this.startY;
                    if( Math.abs( spanX ) < Math.abs( spanY ) ) {
                        if( spanY <= -50 ) {
                            // 上滑
                        }
                        if( spanY > 50 ) {
                            // 下滑
                        }
                    }else{
						if( spanX <= -50 ){
							// 左滑
						}
						if( spanX > 50 ){
							// 右滑
						}
					}
                    break;
                case 'touchmove' : // 阻止默认行为
                    event.preventDefault();
                    break;
            }
        },

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
handleTouchEvent( event ) {
            let spanX, spanY;
            switch( event.type ) {
                case 'touchstart' :
                    this.startX = event.touches[ 0 ].pageX;
                    this.startY = event.touches[ 0 ].pageY;
                    break;
                case 'touchend' :
                    spanX = event.changedTouches[ 0 ].pageX - this.startX;
                    spanY = event.changedTouches[ 0 ].pageY - this.startY;
                    if( Math.abs( spanX ) < Math.abs( spanY ) ) {
                        if( spanY <= -50 ) {
                            // 上滑
                        }
                        if( spanY > 50 ) {
                            // 下滑
                        }
                    }else{
						if( spanX <= -50 ){
							// 左滑
						}
						if( spanX > 50 ){
							// 右滑
						}
					}
                    break;
                case 'touchmove' : // 阻止默认行为
                    event.preventDefault();
                    break;
            }
        },