一. 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>
这样就可以监听滑动的方向和距离了。