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

<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/lijuntao/p/6479972.html