1. 程式人生 > 程式設計 >vue移動端判斷手指在螢幕滑動方向

vue移動端判斷手指在螢幕滑動方向

移動端判斷手指在螢幕滑動方向,供大家參考,具體內容如下

可以據此實現手指滑屏切換tab的功能,例如京東的訂單頁,這幾個tab切換就可以利用這個實現

vue移動端判斷手指在螢幕滑動方向

頁面

<div
      @touchstart="handleTouchstart"
      @touchend="handleTouchend"
      class="slotWrap"
    &www.cppcns.comgt;
//螢幕滑動
//手指按下螢幕
 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].chttp://www.cppcns.com
lientY //判斷按下的時長 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++ //觸發事件 th
is.$emit('getData') } } if(direction==='right'){ if(this.currents===0){ return }else{ this.currents-- //觸發事件 this.$emit('getData') } } }

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。