列表特别多,vue实现无限加载
时间: 2024-03-11 18:47:42 浏览: 12
实现无限加载的一般思路是在滚动到页面底部时,自动加载下一页数据。Vue中可以通过监听滚动事件来实现。
以下是一个简单的示例代码:
```html
<template>
<div class="list-container" ref="listContainer" @scroll="handleScroll">
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
<li v-if="loading">Loading...</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [], // 列表数据
pageNum: 1, // 当前页码
loading: false, // 是否正在加载数据
pageSize: 20 // 每页数据条数
};
},
mounted() {
// 初始化加载第一页数据
this.loadMore();
},
methods: {
handleScroll() {
const listContainer = this.$refs.listContainer;
const scrollHeight = listContainer.scrollHeight;
const scrollTop = listContainer.scrollTop;
const clientHeight = listContainer.clientHeight;
// 当滚动到底部时,并且当前没有正在加载数据时,自动加载下一页数据
if (scrollHeight - scrollTop - clientHeight < 20 && !this.loading) {
this.loadMore();
}
},
async loadMore() {
this.loading = true; // 开始加载数据
try {
const data = await this.fetchData(this.pageNum, this.pageSize);
// 将数据合并到原有列表数据中
this.items = this.items.concat(data.items);
this.pageNum++;
} catch (err) {
console.error(err);
} finally {
this.loading = false; // 结束加载数据
}
},
fetchData(pageNum, pageSize) {
// TODO: 发送请求获取数据
}
}
};
</script>
```
在上面的代码中,我们监听了列表容器的滚动事件,当滚动到底部时就会触发`loadMore`方法加载下一页数据。在加载数据过程中,我们将`loading`标志设置为`true`,表示正在加载数据,防止重复加载。当数据加载完成后,我们将新的数据合并到原有列表数据中,并将`loading`标志设置为`false`,表示数据加载完成。
需要注意的是,在实际开发中,我们需要根据具体的业务场景来调整代码。例如,如果列表数据过多,可能需要对数据进行分页处理;如果数据加载失败,可能需要进行错误处理等。