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