vue滚动实现换页
Vue 滚动实现换页方法
监听滚动事件
在 Vue 中通过 @scroll 或 @wheel 事件监听滚动行为。需在容器元素上添加事件监听，并计算滚动位置触发换页逻辑。
<template>
<div class="scroll-container" @scroll="handleScroll">
<!-- 内容区域 -->
</div>
</template>
<script>
export default {
methods: {
handleScroll(e) {
const container = e.target;
const scrollHeight = container.scrollHeight;
const scrollTop = container.scrollTop;
const clientHeight = container.clientHeight;
// 触底判断（距离底部小于阈值时换页）
if (scrollHeight - scrollTop - clientHeight < 50) {
this.loadNextPage();
}
},
loadNextPage() {
// 加载下一页数据的逻辑
}
}
}
</script>使用 IntersectionObserver API
通过现代浏览器支持的 IntersectionObserver 实现懒加载或分页，性能更优。监听底部元素是否进入视口。
<template>
<div class="scroll-container">
<!-- 内容区域 -->
<div ref="sentinel"></div>
</div>
</template>
<script>
export default {
mounted() {
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
this.loadNextPage();
}
}, { threshold: 0.1 });
observer.observe(this.$refs.sentinel);
},
methods: {
loadNextPage() {
// 加载下一页逻辑
}
}
}
</script>第三方库支持
使用 vue-infinite-scroll 等插件快速实现分页滚动。需先安装依赖：
npm install vue-infinite-scroll集成示例：
<template>
<div v-infinite-scroll="loadNextPage" infinite-scroll-distance="50">
<!-- 内容区域 -->
</div>
</template>
<script>
import infiniteScroll from 'vue-infinite-scroll';
export default {
directives: { infiniteScroll },
methods: {
loadNextPage() {
// 加载下一页逻辑
}
}
}
</script>注意事项
- 节流处理：滚动事件频繁触发时需使用
lodash.throttle或自定义节流函数避免性能问题。 - 加载状态：需添加
loading状态防止重复请求。 - 移动端适配：移动设备可能需额外处理
touch事件或惯性滚动。
通过以上方法可灵活实现 Vue 中的滚动分页功能，根据实际场景选择原生方案或第三方库。
