移动端滑动屏幕方向判断

移动端和小程序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;
            }
        },

最后

以上就是年轻煎蛋为你收集整理的移动端滑动屏幕方向判断的全部内容，希望文章能够帮你解决移动端滑动屏幕方向判断所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。