vue怎么实现滚动加载
滚动加载的实现方法
在Vue中实现滚动加载通常结合IntersectionObserver或监听滚动事件，动态加载数据。以下是两种常见实现方式：
使用IntersectionObserver API
IntersectionObserver是现代浏览器提供的API，性能优于传统滚动事件监听。
<template>
<div>
<div v-for="item in items" :key="item.id">{{ item.content }}</div>
<div ref="loader" v-if="!isFinished">加载中...</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
page: 1,
isFinished: false
}
},
mounted() {
this.initObserver();
this.loadItems();
},
methods: {
initObserver() {
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !this.isFinished) {
this.loadItems();
}
});
observer.observe(this.$refs.loader);
},
async loadItems() {
const newItems = await fetch(`/api/items?page=${this.page}`);
if (newItems.length === 0) {
this.isFinished = true;
return;
}
this.items = [...this.items, ...newItems];
this.page++;
}
}
}
</script>使用滚动事件监听
传统方法通过计算滚动位置判断是否需要加载。
<template>
<div ref="scrollContainer" @scroll="handleScroll">
<div v-for="item in items" :key="item.id">{{ item.content }}</div>
<div v-if="loading">加载中...</div>
</div>
</template>
<script>
export default {
data() {
return {
items: [],
page: 1,
loading: false,
isFinished: false
}
},
mounted() {
this.loadItems();
},
methods: {
handleScroll() {
const container = this.$refs.scrollContainer;
const scrollBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
if (scrollBottom < 100 && !this.loading && !this.isFinished) {
this.loadItems();
}
},
async loadItems() {
this.loading = true;
const newItems = await fetch(`/api/items?page=${this.page}`);
this.loading = false;
if (newItems.length === 0) {
this.isFinished = true;
return;
}
this.items = [...this.items, ...newItems];
this.page++;
}
}
}
</script>注意事项
- 滚动容器需要设置固定高度和
overflow-y: scroll - 移动端建议使用
IntersectionObserver以获得更好性能 - 需要添加防抖处理避免频繁触发加载
- 加载完成后应移除事件监听或Observer
- 服务端接口需支持分页参数
两种方式各有优劣，IntersectionObserver更现代化但需要考虑浏览器兼容性，滚动事件监听兼容性更好但性能稍差。根据项目需求选择合适方案。
