vue3移动端怎么判断向左还是向右滑动
时间: 2023-07-27 21:24:38 浏览: 172
可以通过监听 `touchstart` 和 `touchend` 事件,并记录下滑动开始和结束时的坐标,然后比较两个坐标的横向偏移量来判断是向左还是向右滑动。
以下是一个示例代码:
```html
<template>
<div class="container"
@touchstart="onTouchStart"
@touchend="onTouchEnd">
</div>
</template>
<script>
export default {
methods: {
onTouchStart(event) {
this.touchStartX = event.changedTouches[0].clientX
},
onTouchEnd(event) {
const touchEndX = event.changedTouches[0].clientX
const deltaX = touchEndX - this.touchStartX
if (deltaX > 0) {
console.log('向右滑动')
} else if (deltaX < 0) {
console.log('向左滑动')
} else {
console.log('未滑动')
}
}
}
}
</script>
```
在 `onTouchStart` 事件中记录下滑动开始时的横向坐标 `touchStartX`,在 `onTouchEnd` 事件中获取滑动结束时的横向坐标 `touchEndX`,并计算两个坐标的横向偏移量 `deltaX`。若 `deltaX` 大于 0,则表示向右滑动;若 `deltaX` 小于 0,则表示向左滑动;否则未滑动。
阅读全文