【VUE 监听用户滑动】

一. 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].pageXif (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>

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