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].clientXthis.moveingPosition.Y = event.changedTouches[0].clientY// let time = Date.now()-this.startTimelet 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 = truelet direction = this.moveingPosition.X - this.startPosition.X > 0 ? "right" : "left"// console.log(direction)// let X = event.changedTouches[0].clientXlet 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}},

uniapp 简单有效判断手指滑动方向相关推荐

Untiy3D笔记之番外篇——判断手指滑动方向
最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...
判断手指滑动方向 -- Android 学习之路
通过onTouchEvent 事件实现判断手指滑动方向今天在做2048的时候遇到的一个知识点,这里做一下总结用到的知识点 Android屏幕坐标系常用的触发事件判断滑动方向获取手指触屏时的坐 ...
androidstudio判断手指滑动方向_方向盘的黑科技有多“黑”
Mercedes-Benz 从第一辆汽车发明到现在的一个多世纪里,有数不清的汽车品牌诞生,也有不少品牌衰败.而他们中间,真正敢说"我为汽车技术的革命与进步做出了贡献"的品牌却寥寥无 ...
移动端js判断手指滑动方向
var startx, starty;//获得角度function getAngle(angx, angy) {return Math.atan2(angy, angx) * 180 / Math.P ...
h5滚动时侧滑出现_H5触摸事件中如何判断用户滑动方向
这次给大家带来H5触摸事件中如何判断用户滑动方向,H5触摸事件中判断用户滑动方向的注意事项有哪些,下面就是实战案例,一起来看一下. 接口 TouchEvent TouchEvent 是一类描述手指在触 ...
html5触摸事件判断滑动方向,H5触摸事件中如何判断用户滑动方向
这次给大家带来H5触摸事件中如何判断用户滑动方向,H5触摸事件中判断用户滑动方向的注意事项有哪些,下面就是实战案例,一起来看一下. 接口 TouchEvent TouchEvent 是一类描述手指在触 ...
H5中判断手势滑动方向
touchstart.touchend事件判断手势滑动方向 //data中进行定义 startX:null, startY:null,//mounted生命周期中进行监听 document.addEv ...
MotionEvent判断手指滑动的距离
分析:点击屏幕会触发down move up 判断手指是否执行了移动操作获取x,y的坐标值 MotionEvent.ACTION_DOWN:方法中获取x,y的坐标 case MotionEvent. ...
开发板Linux手指滑动方向,移动应用滑动屏幕方向判断解决方案,JS判断手势方向...
问题分类滑动屏幕打开相应功能操作. 问题描述 1.用户手动滑动屏幕,根据滑动的方向,打开相应的功能(如:向上滑摇钱树经验明细,向下滑打开任务明细,向左滑打开聚宝盆物品查看等功能),滑动事件捕获问题. ...

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

uniapp 简单有效判断手指滑动方向相关推荐

最新文章

热门文章