快捷導(dǎo)航

vue移動(dòng)端判斷手指在屏幕滑動(dòng)方向

更新時(shí)間：2021年06月29日 09:01:10 作者：contour

這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端判斷手指在屏幕滑動(dòng)方向，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

vue移動(dòng)端判斷手指在屏幕滑動(dòng)方向，供大家參考，具體內(nèi)容如下

可以據(jù)此實(shí)現(xiàn)手指滑屏切換tab的功能，例如京東的訂單頁(yè)，這幾個(gè)tab切換就可以利用這個(gè)實(shí)現(xiàn)

頁(yè)面

<div
      @touchstart="handleTouchstart"
      @touchend="handleTouchend"
      class="slotWrap"
    >

//屏幕滑動(dòng)
//手指按下屏幕
 handleTouchstart(event){
  this.startTime = Date.now()
  this.startX = event.changedTouches[0].clientX
  this.startY = event.changedTouches[0].clientY
},
//手指離開(kāi)屏幕
handleTouchend(event){
  const endTime = Date.now()
  const endX = event.changedTouches[0].clientX
  const endY = event.changedTouches[0].clientY
  //判斷按下的時(shí)長(zhǎng)
  if(endTime - this.startTime >2000){
    return
  }
  //滑動(dòng)的方向
  let direction = "";
  //先判斷用戶滑動(dòng)的距離，是否合法，合法:判斷滑動(dòng)的方向 注意 距離要加上絕對(duì)值
  if(Math.abs(endX -this.startX)>10){
    //滑動(dòng)方向
    if(Math.abs(endY -this.startY)>30){
      // console.log("y方向偏移太多，不讓你滑了")
      return
    }else{
      direction = endX -this.startX >0?"right":"left"
    }
  }else{
    return
  }
  //用戶做了合法的滑動(dòng)操作
  // console.log('方向'+direction)
  if(direction==='left'){
    if(this.currents+1===this.list.length){
      return
    }else{
      this.currents++
      //觸發(fā)事件
      this.$emit('getData')
    }
  }
  if(direction==='right'){
    if(this.currents===0){
      return
    }else{
      this.currents--
      //觸發(fā)事件
      this.$emit('getData')
    }
  }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中v-for通過(guò)動(dòng)態(tài)綁定class實(shí)現(xiàn)觸發(fā)效果
這篇文章主要介紹了vue中v-for通過(guò)動(dòng)態(tài)綁定class實(shí)現(xiàn)觸發(fā)效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-12-12
基于Vue3實(shí)現(xiàn)的圖片散落效果實(shí)例
最近工作中遇到一個(gè)效果還不錯(cuò),所以想著實(shí)現(xiàn)一下,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3實(shí)現(xiàn)的圖片散落效果的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-04-04
keep-Alive搭配vue-router實(shí)現(xiàn)緩存頁(yè)面效果的示例代碼
這篇文章主要介紹了keep-Alive搭配vue-router實(shí)現(xiàn)緩存頁(yè)面效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-06-06
vue.js數(shù)據(jù)綁定的方法（單向、雙向和一次性綁定）
本篇文章主要介紹了vue.js數(shù)據(jù)綁定的方法（單向、雙向和一次性綁定），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
vue實(shí)現(xiàn)自定義el-table穿梭框功能
這篇文章主要介紹了vue實(shí)現(xiàn)自定義el-table穿梭框功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
vue中后端做Excel導(dǎo)出功能返回?cái)?shù)據(jù)流前端的處理操作
這篇文章主要介紹了vue中后端做Excel導(dǎo)出功能返回?cái)?shù)據(jù)流前端的處理操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
Vue3的組合式API中使用ref()函數(shù)的例子
你們是否聽(tīng)說(shuō)過(guò)Vue3的組合式API？它可是Vue3的新玩法，把以前的Vue2組件函數(shù)轉(zhuǎn)化為了函數(shù)組件。好了，今天我要和大家分享的是如何在組合式API中使用ref()函數(shù)，感興趣的朋友跟隨小編一起看看吧
2023-06-06
聊聊Vue中provide/inject的應(yīng)用詳解
這篇文章主要介紹了聊聊Vue中provide/inject的應(yīng)用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
element-plus的自動(dòng)導(dǎo)入和按需導(dǎo)入方式詳解
之前使用 ElementPlus 做項(xiàng)目的時(shí)候,由于不會(huì)使用按需引入耽誤了不少時(shí)間,這篇文章主要給大家介紹了關(guān)于element-plus自動(dòng)導(dǎo)入和按需導(dǎo)入的相關(guān)資料,需要的朋友可以參考下
2022-08-08
Vue.js如何獲取data-*的值
這篇文章主要介紹了Vue.js如何獲取data-*的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09