vue加载更多实现
滚动监听实现加载更多
通过监听滚动事件判断是否到达底部触发加载。在组件的mounted钩子中添加滚动事件监听器，计算滚动位置与文档高度的关系。
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
methods: {
handleScroll() {
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const windowHeight = window.innerHeight;
const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
if (scrollTop + windowHeight >= scrollHeight - 100) {
this.loadMore();
}
},
loadMore() {
if (this.loading || !this.hasMore) return;
this.loading = true;
// API请求逻辑
}
}使用Intersection Observer API
现代浏览器支持的更高效方法。创建观察器监视底部标记元素，当元素进入视口时触发加载。
data() {
return {
observer: null
}
},
mounted() {
this.observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
this.loadMore();
}
});
this.observer.observe(document.querySelector('#load-more-trigger'));
},
methods: {
loadMore() {
// 加载数据逻辑
}
}分页参数管理
维护分页状态变量，每次加载时递增页码或偏移量。典型实现需要当前页码和每页条数两个参数。
data() {
return {
page: 1,
pageSize: 10,
list: [],
hasMore: true
}
},
methods: {
async loadMore() {
if (!this.hasMore) return;
const res = await api.getList({
page: this.page,
size: this.pageSize
});
this.list = [...this.list, ...res.data];
this.hasMore = res.data.length >= this.pageSize;
this.page++;
}
}加载状态反馈
在模板中添加加载状态提示，提升用户体验。包括加载中和无更多数据两种状态。
<div v-if="loading" class="loading">加载中...</div>
<div v-if="!hasMore" class="no-more">没有更多数据了</div>
<div id="load-more-trigger"></div>第三方库实现
使用vue-infinite-loading等现成库简化开发。安装后直接使用组件即可实现复杂的分页加载逻辑。
npm install vue-infinite-loadingimport InfiniteLoading from 'vue-infinite-loading';
components: { InfiniteLoading }<infinite-loading @infinite="loadMore">
<div slot="no-more">没有更多数据</div>
<div slot="no-results">暂无数据</div>
</infinite-loading>
