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