vue中实现滚动加载
Vue 中实现滚动加载的方法
监听滚动事件
在 Vue 中可以通过 @scroll 事件监听滚动行为，结合 scrollTop、clientHeight 和 scrollHeight 判断是否滚动到底部。
methods: {
handleScroll() {
const scrollPosition = window.innerHeight + window.scrollY;
const pageHeight = document.body.offsetHeight;
if (scrollPosition >= pageHeight - 200) { // 距离底部200px触发
this.loadMore();
}
}
},
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll);
}使用 Intersection Observer API
现代浏览器推荐使用 Intersection Observer 实现更高效的滚动检测，避免频繁触发滚动事件。
data() {
return {
observer: null
}
},
mounted() {
this.observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
this.loadMore();
}
});
this.observer.observe(document.querySelector('#load-more-trigger'));
},
beforeDestroy() {
this.observer.disconnect();
}第三方库封装
使用现成的 Vue 指令库如 vue-infinite-scroll 快速实现：
安装依赖：
npm install vue-infinite-scroll使用示例：
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy">
<!-- 内容列表 -->
</div>性能优化注意事项
- 添加防抖（debounce）避免频繁触发加载
- 在加载新数据时禁用滚动监听
- 使用虚拟滚动（virtual scroll）处理超长列表
- 移动端需考虑 touch 事件兼容性
完整组件示例
<template>
<div class="scroll-container">
<div v-for="item in items" :key="item.id">{{ item.content }}</div>
<div v-if="loading" class="loading">加载中...</div>
<div v-if="noMore" class="no-more">没有更多了</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
page: 1,
loading: false,
noMore: false
}
},
methods: {
async loadMore() {
if (this.loading || this.noMore) return;
this.loading = true;
try {
const newItems = await fetchData(this.page);
if (newItems.length) {
this.items.push(...newItems);
this.page++;
} else {
this.noMore = true;
}
} finally {
this.loading = false;
}
}
},
mounted() {
this.loadMore();
window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
window.removeEventListener('scroll', this.handleScroll);
}
}
</script>
