vue滚动实现换页
实现 Vue 滚动换页的方法
监听滚动事件
在 Vue 组件中通过 @scroll 或 @wheel 事件监听滚动行为。建议使用防抖函数优化性能，避免频繁触发计算。
<template>
<div class="scroll-container" @wheel="handleWheel">
<!-- 页面内容 -->
</div>
</template>
<script>
export default {
methods: {
handleWheel(e) {
// 防抖逻辑
clearTimeout(this.timer);
this.timer = setTimeout(() => {
this.checkScrollDirection(e);
}, 100);
}
}
}
</script>判断滚动方向
通过 deltaY 或 scrollTop 值判断用户意图。向上滚动为负值，向下滚动为正值。
checkScrollDirection(e) {
const delta = e.deltaY;
if (delta > 0) {
this.goNextPage();
} else if (delta < 0) {
this.goPrevPage();
}
}页面切换逻辑
使用 Vue Router 或组件状态管理实现页面切换。动态调整 translateY 或通过 v-show 控制页面显示。
data() {
return {
currentPage: 1,
totalPages: 3
}
},
methods: {
goNextPage() {
if (this.currentPage < this.totalPages) {
this.currentPage++;
}
},
goPrevPage() {
if (this.currentPage > 1) {
this.currentPage--;
}
}
}CSS 动画过渡
通过 CSS 实现平滑的滚动动画效果，增强用户体验。
.scroll-container {
overflow: hidden;
height: 100vh;
transition: transform 0.5s ease;
}
.page {
height: 100vh;
}移动端兼容处理
添加 touch 事件支持，监听 touchstart 和 touchend 计算滑动距离。
<template>
<div
@touchstart="handleTouchStart"
@touchend="handleTouchEnd"
>
</div>
</template>
<script>
export default {
data() {
return {
startY: 0
}
},
methods: {
handleTouchStart(e) {
this.startY = e.touches[0].clientY;
},
handleTouchEnd(e) {
const endY = e.changedTouches[0].clientY;
if (this.startY - endY > 50) {
this.goNextPage();
} else if (endY - this.startY > 50) {
this.goPrevPage();
}
}
}
}
</script>路由模式集成
若使用 Vue Router，可通过编程式导航实现页面跳转。
methods: {
goNextPage() {
const nextPage = this.$route.params.page + 1;
this.$router.push(`/page/${nextPage}`);
}
}性能优化建议
- 使用
will-change: transform提升动画性能 - 对非当前页面的内容进行懒加载
- 避免在滚动事件中执行复杂计算
以上方法可根据实际需求组合使用，建议优先考虑 CSS 动画方案以获得更流畅的效果。对于复杂场景，可结合第三方库如 vue-scroll-snap 或 fullpage.js 实现更完善的滚动分页功能。
