vue实现滑动翻页
Vue 实现滑动翻页的方法
使用 touch 事件监听
在 Vue 组件中监听 touchstart、touchmove 和 touchend 事件，通过计算滑动距离判断翻页方向。
<template>
<div
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
>
<!-- 页面内容 -->
</div>
</template>
<script>
export default {
data() {
return {
startX: 0,
endX: 0
}
},
methods: {
handleTouchStart(e) {
this.startX = e.touches[0].clientX
},
handleTouchMove(e) {
this.endX = e.touches[0].clientX
},
handleTouchEnd() {
const diffX = this.endX - this.startX
if (Math.abs(diffX) > 50) { // 滑动阈值
if (diffX > 0) {
this.$emit('swipe-left') // 向左滑动
} else {
this.$emit('swipe-right') // 向右滑动
}
}
}
}
}
</script>使用第三方库
安装 vue-touch 或 hammer.js 等手势库可以简化实现：
npm install hammerjs<template>
<div ref="swipeContainer">
<!-- 页面内容 -->
</div>
</template>
<script>
import Hammer from 'hammerjs'
export default {
mounted() {
const hammer = new Hammer(this.$refs.swipeContainer)
hammer.on('swipeleft', () => {
this.$emit('swipe-left')
})
hammer.on('swiperight', () => {
this.$emit('swipe-right')
})
}
}
</script>结合 CSS 过渡效果
为翻页添加平滑的过渡效果：
.page {
transition: transform 0.3s ease;
}
.page-enter {
transform: translateX(100%);
}
.page-leave-to {
transform: translateX(-100%);
}完整示例
结合 Vue 的过渡组件和滑动事件：
<template>
<transition :name="transitionName">
<div
class="page"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
>
<!-- 当前页内容 -->
</div>
</transition>
</template>
<script>
export default {
data() {
return {
startX: 0,
transitionName: ''
}
},
methods: {
handleTouchStart(e) {
this.startX = e.touches[0].clientX
},
handleTouchEnd(e) {
const endX = e.changedTouches[0].clientX
const diffX = endX - this.startX
if (Math.abs(diffX) > 50) {
this.transitionName = diffX > 0 ? 'slide-right' : 'slide-left'
this.$emit('swipe', diffX > 0 ? 'left' : 'right')
}
}
}
}
</script>
<style>
.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
transition: transform 0.3s;
}
.slide-left-enter {
transform: translateX(100%);
}
.slide-left-leave-to {
transform: translateX(-100%);
}
.slide-right-enter {
transform: translateX(-100%);
}
.slide-right-leave-to {
transform: translateX(100%);
}
</style>注意事项
- 移动端开发需要添加视口 meta 标签
- 考虑边界情况（第一页和最后一页）
- 性能优化：避免在滑动过程中频繁触发重排
- 可以结合 Vuex 或 props 管理页面状态
以上方法可以根据具体需求调整滑动灵敏度、动画时长等参数，实现更自然的翻页效果。
