vue手势左右滑动,vue手指触摸滑动事件
本文主要介绍vue移动终端判断手指在屏幕上滑动的方向。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
Vue移动终端判断手指在屏幕上滑动的方向，供您参考，具体如下
据此可以实现手指滑屏切换标签页的功能，比如JD.COM的订单页面，这些标签页都可以通过这个实现进行切换。
页，面，张，版
差异
@touchstart=handleTouchstart
@touchend=handleTouchend
slotWrap
//屏幕滑动
//用手指按屏幕
handleTouchstart(事件){
this.startTime=Date.now()
this . startx=event . changed touches[0]。clientX
this . starty=event . changed touches[0]。客户
},
//手指离开屏幕
handleTouchend(事件){
const endTime=Date.now()
const endX=event . changed touches[0]。clientX
const endY=event . changed touches[0]。客户
//确定按压的持续时间。
if(end time-this . start time 2000){
返回
}
//滑动方向
设方向=“”；
//首先判断用户的滑动距离是否合法：判断滑动方向。注意，绝对值应该加到距离上。
if(math . ABS(endX-this . startx)10){
//滑动方向
if(math . ABS(endY-this . starty)30){
//console . log( Y方向偏移太大，让你滑不动)
返回
}否则{
direction=endX -this.startX 0？“右”:“左”
}
}否则{
返回
}
//用户做了合法的滑动操作。
//console.log (direction 方向)
if(direction===left){
if(this . currents 1===this . list . length){
返回
}否则{
这股潮流
//触发事件
这个。$emit(getData )
}
}
if(direction===right){
if(this.currents===0){
返回
}否则{
这个水流-
//触发事件
这个。$emit(getData )
}
}
}
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。