<template>
<div class="infinite-scroll-container">
<el-button
v-if="hasMore"
@click="loadMore"
:loading="isLoading"
type="primary"
>
点击加载更多
</el-button>
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="isLoading" >
<!-- 数据列表或其他内容 -->
<div v-for="(item, index) in list" :key="index">
{{ item }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list: [], // 数据列表
isLoading: false, // 是否正在加载
hasMore: true, // 是否还有更多数据
page: 1, // 当前页数
pageSize: 10, // 每页数据量
};
},
methods: {
async loadMore() {
if (this.isLoading || !this.hasMore) return;
this.isLoading = true;
try {
const moreData = await this.fetchData(this.page, this.pageSize);
if (moreData.length < this.pageSize) {
this.hasMore = false; // 数据已全部加载完毕
} else {
this.list = [...this.list, ...moreData];
this.page += 1;
}
} catch (error) {
console.error('数据加载失败:', error);
} finally {
this.isLoading = false;
}
},
async fetchData(page, pageSize) {
// 这里应该是调用API获取数据的函数，具体实现根据实际API而定
// 模拟API调用
return new Promise((resolve) => {
setTimeout(() => {
const data = Array.from({ length: pageSize }, (_, i) => `Item ${page * pageSize + i}`);
resolve(data);
}, 1000);
});
},
},
};
</script>
<style>
.infinite-scroll-container {
height: 400px; /* 设置一个高度以便滚动 */
overflow-y: auto;
}
</style>这个示例展示了如何在Vue组件中使用v-infinite-scroll指令实现无限滚动加载数据的功能。组件包含一个按钮，当用户滚动到页面底部时，会触发加载更多数据的操作。数据通过模拟API调用（fetchData函数）获取，并且在加载过程中展示加载状态。当没有更多数据时，按钮会被禁用。这个示例提供了一个简单的无限滚动加载实现，并且可以根据实际需求进行扩展和修改。