vue移动端判断手指在屏幕滑动方向 vue移动端判断手指在屏幕滑动

vue移动端判断手指在屏幕滑动方向，供大家参考，具体内容如下
可以据此实现手指滑屏切换tab的功能，例如京东的订单页，这几个tab切换就可以利用这个实现

文章图片

页面

//屏幕滑动//手指按下屏幕 handleTouchstart(event){this.startTime = Date.now()this.startX = event.changedTouches[0].clientXthis.startY = event.changedTouches[0].clientY},//手指离开屏幕handleTouchend(event){const endTime = Date.now()const endX = event.changedTouches[0].clientXconst endY = event.changedTouches[0].clientY//判断按下的时长if(endTime - this.startTime >2000){return}//滑动的方向let direction = ""; //先判断用户滑动的距离，是否合法，合法:判断滑动的方向注意距离要加上绝对值if(Math.abs(endX -this.startX)>10){//滑动方向if(Math.abs(endY -this.startY)>30){// console.log("y方向偏移太多，不让你滑了")return}else{direction = endX -this.startX >0?"right":"left"}}else{return}//用户做了合法的滑动操作// console.log('方向'+direction)if(direction==='left'){if(this.currents+1===this.list.length){return}else{this.currents++//触发事件this.$emit('getData')}}if(direction==='right'){if(this.currents===0){return}else{this.currents--//触发事件this.$emit('getData')}}}

【vue移动端判断手指在屏幕滑动方向】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。