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

vue移动端判断手指在屏幕滑动方向,供大家参考,具体内容如下

可以据此实现手指滑屏切换tab的功能,例如京东的订单页,这几个tab切换就可以利用这个实现

页面

<div

@touchstart="handleTouchstart"

@touchend="handleTouchend"

class="slotWrap"

>

//屏幕滑动

//手指按下屏幕

handleTouchstart(event){

this.startTime = Date.now()

this.startX = event.changedTouches[0].clientX

this.startY = event.changedTouches[0].clientY

},

//手指离开屏幕

handleTouchend(event){

const endTime = Date.now()

const endX = event.changedTouches[0].clientX

const 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移动端判断手指在屏幕滑动方向 的全部内容, 来源链接: utcz.com/p/220900.html

回到顶部