uniapp 简单有效判断手指滑动方向

@touchstart="touchStart"
		@touchend="touchEnd"
		@touchmove='move'

首先 是在uniapp中运用这三个方法来监听手指动作。

接着我们只需要把手指移动过程中的坐标进行比较就可以判断滑动方向，具体思路就是如果只判断上下左右，四个方向。那么只相当于判断所滑动画出线段的夹角和X,Y轴的夹角是否是45度，也就是，是否和原点及XY轴呈等腰直角三角形：如果x坐标绝对值大于y坐标绝对值，那么一定是x轴方向移动，画出线段更趋近于平行于x轴，用户意图也更倾向于画横线。所以在这个思路下就很好判断四个方向了。代码如下，相比很多人算360度角度的方法简单实用的多，容错率高。也可以把正好夹角45度的可能也包含进去。

滑动开始：

    touchEnd(event) {
                //关闭手指移动的标识
                this.touchingFlag = false
                const endTime = Date.now()
                if (endTime - this.startTime < 300) {
                    // 如果手指滑动的距离超过0.3s 就默认不合法
                    return;
                }
                //获取滑动结束后的坐标
                    this.endPosition.X = event.changedTouches[0].clientX
                    this.endPosition.Y = event.changedTouches[0].clientY
                if (Math.abs(this.endPosition.X - this.startPosition.X) > 10 && this.Xflag) {//大于10个单位才有效
                    //long的滑动长度绝对值作为视频s的值。
                    let  long = Math.abs(this.endPosition.X - this.startPosition.X)
                    let  height = Math.abs(this.endPosition.Y - this.startPosition.Y)
                    //left向前 right向后 
                    let  elePosition = this.endPosition.X - this.startPosition.X > 0 ? "right" : "left"
                    //有三个值需要传递 1 :左or右 2: long数值 3: touchEndFlag
                     this.setInfo.value = long
                     this.setInfo.direction = elePosition
                     this.setInfo.flag = true
                // console.log(elePosition+'-'+long)
                }
                //复原互斥开关
                this.Xflag = false
                this.Yflag = false
                
            },

move(event){
				 this.touchingFlag = true//移动进行
				 this.setInfo.flag = false//关闭标识 允许设置播放时间不能执行
				 this.moveingPosition.X = event.changedTouches[0].clientX
				 this.moveingPosition.Y = event.changedTouches[0].clientY

		    	// let time = Date.now()-this.startTime
				let Xlength =parseInt(Math.abs(this.moveingPosition.X - this.startPosition.X))
				let Ylength =parseInt(Math.abs(this.moveingPosition.Y - this.startPosition.Y)) 
				if(Xlength>Ylength && Xlength>10 && this.Yflag==false ){//x轴方向
					this.Xflag = true
					let direction = this.moveingPosition.X - this.startPosition.X > 0 ? "right" : "left"
					// console.log(direction)
					// let X = event.changedTouches[0].clientX
					let long =parseInt(this.moveingPosition.X -  this.startPosition.X) 
					//获取到实时手指滑动距离 将这个值传入到renderjs和视频总长度及当前播放时间进行计算
					this.moveLong = long
				}
				 if(Xlength<Ylength && Ylength>10 && this.Xflag==false ){//Y轴方向
				    this.Yflag = true 
					let direction = this.moveingPosition.Y - this.startPosition.Y > 0 ? "down" : "up"
					// console.log(direction)
					//监听一个音量值 调用renderjs里方法调整音量值
					let height = parseInt(this.moveingPosition.Y -  this.startPosition.Y) 
					this.volume = height
				}
			},