vue js 判斷長按觸發及手指的滑動方向

前言

項目需求是手指上滑則隱藏頂部組件,下滑則顯示頂部組件。所以需要在監聽組件中綁定 touch 事件獲取對應的值

這里 div 是表示的是一個將 listData 數組對象中的每一項元素都循環表示出來,@touchstart監聽 getTouchstartY() 函數用來獲取手指在最開始觸及屏幕時的 y 軸坐標,@touchmove監聽 touchmove() 函數用來判斷手指滑動方向

<div
  v-for="(i, item) in listData"
  :key="item"
  @touchstart="getTouchstartY()"
  @touchmove="touchmove()"
></div>

getTouchstartY()函數代碼為:

getTouchstartY() {
      this.startY = event.changedTouches[0].pageY  //將手指對應的y軸坐標賦值給data中的startY
}

touchmove(){
      // 如果手指有移動，則取消所有事件，此時說明用戶只是要移動而不是長按
      // event.preventDefault()
      let moveEndY = event.changedTouches[0].pageY
      let Y = moveEndY - this.startY  //如果值為正,則代表手指下滑,反則則為上滑,為0則表示點擊
      if (Y > 0) {
        // console.log('下滑')
        this.$emit('showBool', true)  //子組件向父組件傳值,顯示父組件的頂部組件
      } else if (Y < 0) {
        // console.log('上滑')
        this.$emit('showBool', false) //隱藏頂部組件
      } else {
        // console.log('just touch')
      }
}

拓展

vue js 判斷長按觸發及手指的上滑、下滑、左滑、又滑

html 代碼為

<span
  class="btn"
  @touchstart="touchstart()"
  @touchmove="touchmove()"
  @touchend="touchend()"
  >按住說話</span
>

監聽點擊操作

@touchstart： 觸發按下事件

touchstart() {
      event.preventDefault() //阻止默認事件（長按的時候出現復制）
      this.startX = event.changedTouches[0].pageX
      this.startY = event.changedTouches[0].pageY
}

監聽移動操作

@touchmove：觸發移動事件，通過 x 軸 y 軸移動的距離判斷是左滑右滑

touchmove() { // 如果手指有移動，則取消所有事件，此時說明用戶只是要移動而不是長按
      event.preventDefault()
      var moveEndX = event.changedTouches[0].pageX
      var moveEndY = event.changedTouches[0].pageY
      var X = moveEndX - this.startX
      var Y = moveEndY - this.startY
      if (Math.abs(X) > Math.abs(Y) && X > 0) {
        alert('left 2 right')
      } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
        alert('right 2 left')
      } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
        alert('top 2 bottom')
      } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
        alert('bottom 2 top')
      } else {
        alert('just touch')
      }
    },

touchmove 的最后坐標減去 touchstart 的起始坐標，X 的結果如果正數，則說明手指是從左往右划動；X 的結果如果負數，則說明手指是從右往左划動；Y 的結果如果正數，則說明手指是從上往下划動；Y 的結果如果負數，則說明手指是從下往上划動。

但是：

實際上手指在手機上面滑動時很難做到直上直下的滑動；只要稍微有點斜，就會被 x 軸的判斷條件接管，而與我們的實際操作相背離。此時就需要添加特殊的判斷技巧，代碼如下：

監聽移動結束操作

@touchend：觸發結束移動事件 通過事件判斷是否是長按事件

touchend() { // 手釋放，如果在500毫秒內就釋放，則取消長按事件
      event.preventDefault()
      this.EndTime = new Date().getTime()
      this.isRecord = false

      if (this.EndTime - this.StarTime < 500) {
        this.EndTime = 0
        this.StarTime = 0
        clearTimeout(this.timeOutEvent)// 清除定時器
        alert('取消')
      } else {
        alert('松手')
        wx.stopRecord({
          success: function(res) {
            alert('localId')
            alert(res)
            alert(JSON.stringify(res))
            this.localId = res.localId
          },
          fail: function(res) {
            alert(JSON.stringify(res))
          }
        })
      }

最后

十分感謝原博客的博主，原博客地址如下:
https://www.cnblogs.com/dudu123/p/10788649.html