一. touchstart、touchmove、touchend

在 Vue 中监听用户往哪个方向滑动可以通过添加事件监听器，然后在事件回调函数中判断滑动方向。常用的事件监听器有touchstart、touchmove、touchend等。

以下是一个简单的示例代码，用于监听用户在移动端向左滑动事件：

<template>
  <div ref="sliderContainer" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
    <!-- 在这里放置你的滑动内容 -->
  </div>
</template>

<script>
export default {
    
    
  methods: {
    
    
    handleTouchStart (e) {
    
    
      this.touchStartX = e.touches[0].pageX
    },
    handleTouchMove (e) {
    
    
      const touchCurrentX = e.touches[0].pageX
      if (touchCurrentX < this.touchStartX) {
    
    
        // 用户向左滑动
        console.log('用户向左滑动')
      }
    },
    handleTouchEnd (e) {
    
    
      // 清空触摸起始位置
      this.touchStartX = null
    }
  }
}
</script>

需要注意的是，在监听移动端的滑动事件时，需要使用touches属性来获取触摸事件的详细信息，例如上述代码中的e.touches[0].pageX即为用户触摸的屏幕位置。

二.v-touch

在 Vue 中监听用户往四个方向滑动，可以使用 Vue 的指令 v-touch，它是一个处理 touch 事件的指令。你可以使用 v-touch 监听用户在某个元素上滑动的事件，然后根据滑动的方向来进行相应的操作。下面是一个示例：

<template>
  <div v-touch:swipe="onSwipe">
    Swipe me
  </div>
</template>

<script>
export default {
    
    
  methods: {
    
    
    onSwipe(event) {
    
    
      const dir = event.direction;
      if (dir === 'left') {
    
    
        // 用户向左滑动
      } else if (dir === 'right') {
    
    
        // 用户向右滑动
      } else if (dir === 'up') {
    
    
        // 用户向上滑动
      } else if (dir === 'down') {
    
    
        // 用户向下滑动
      }
    }
  }
}
</script>

注意：v-touch 指令默认只在移动设备上工作，如果你想在桌面端使用它，需要使用特定的 touch 模拟器。

三. 自定义指令

可以使用Vue的自定义指令来实现监听滑动方向与距离。

首先，可以注册一个自定义指令来监听滑动事件：

Vue.directive('swipe', {
    
    
  bind: function(el, binding) {
    
    
    let startX, startY, endX, endY;
    el.addEventListener('touchstart', function(event) {
    
    
      startX = event.touches[0].clientX;
      startY = event.touches[0].clientY;
    });
    el.addEventListener('touchend', function(event) {
    
    
      endX = event.changedTouches[0].clientX;
      endY = event.changedTouches[0].clientY;
      const diffX = endX - startX;
      const diffY = endY - startY;
      const absDiffX = Math.abs(diffX);
      const absDiffY = Math.abs(diffY);
      if (absDiffX > absDiffY) {
    
    
        // 横向滑动
        if (diffX > 0) {
    
    
          // 右滑
          binding.value('right', absDiffX);
        } else {
    
    
          // 左滑
          binding.value('left', absDiffX);
        }
      } else {
    
    
        // 纵向滑动
        if (diffY > 0) {
    
    
          // 下滑
          binding.value('down', absDiffY);
        } else {
    
    
          // 上滑
          binding.value('up', absDiffY);
        }
      }
    })
  }
})

然后，在需要监听滑动事件的元素上使用 v-swipe 指令，并传入一个函数作为参数，该函数接收两个参数，分别为滑动方向和距离。

<template>
  <div v-swipe="handleSwipe">
    ...
  </div>
</template>
<script>
  export default {
      
      
    methods: {
      
      
      handleSwipe(direction, distance) {
      
      
        console.log(`滑动方向：${ 
        direction}，滑动距离：${ 
        distance}`);
      }
    }
  }
</script>

这样就可以监听滑动的方向和距离了。

扫描二维码关注公众号，回复： 16138423 查看本文章