vue 实现加载更多
Vue 实现加载更多功能
实现加载更多功能通常结合分页数据与滚动事件监听，以下是几种常见方法：
滚动监听 + 分页加载
监听滚动事件，当滚动到底部时触发加载更多数据：
<template>
<div class="list-container" @scroll="handleScroll">
<div v-for="item in list" :key="item.id">{{ item.content }}</div>
<div v-if="loading">加载中...</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [],
page: 1,
loading: false,
hasMore: true
}
},
methods: {
async loadData() {
if (this.loading || !this.hasMore) return;
this.loading = true;
const res = await fetchData(this.page); // 替换为实际API调用
this.list = [...this.list, ...res.data];
this.hasMore = res.hasMore;
this.page++;
this.loading = false;
},
handleScroll(e) {
const { scrollTop, clientHeight, scrollHeight } = e.target;
if (scrollHeight - scrollTop <= clientHeight + 50) {
this.loadData();
}
}
},
mounted() {
this.loadData();
}
}
</script>
<style scoped>
.list-container {
height: 500px;
overflow-y: auto;
}
</style>使用 Intersection Observer API
更现代的滚动检测方式，性能优于传统滚动事件：
methods: {
initObserver() {
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
this.loadData();
}
});
observer.observe(this.$refs.observerTarget);
}
},
mounted() {
this.loadData();
this.initObserver();
}模板中需要添加观察目标元素：
<div ref="observerTarget" v-if="hasMore"></div>使用第三方库
对于复杂场景，可考虑专用无限滚动库：
npm install vue-infinite-loading实现示例：
import InfiniteLoading from 'vue-infinite-loading';
export default {
components: { InfiniteLoading },
methods: {
async loadMore($state) {
const res = await fetchData(this.page);
if (res.data.length) {
this.list.push(...res.data);
this.page++;
$state.loaded();
} else {
$state.complete();
}
}
}
}模板部分：
<infinite-loading @infinite="loadMore"></infinite-loading>注意事项
- 添加防抖处理避免频繁触发
- 移动端需要考虑滚动穿透问题
- 服务端应返回是否有更多数据的标识
- 列表项需要稳定的key值
- 加载失败时需要提供重试机制
以上方法可根据具体项目需求选择实现，核心逻辑都是监听滚动位置触发数据加载。
