vue移動端判斷手指在螢幕滑動方向
阿新 • • 發佈:2021-06-30
移動端判斷手指在螢幕滑動方向,供大家參考,具體內容如下
可以據此實現手指滑屏切換tab的功能,例如京東的訂單頁,這幾個tab切換就可以利用這個實現
頁面
<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.comlientY //判斷按下的時長 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') } } }
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。