Vue滚动条触底加载
时间: 2023-07-07 12:23:31 浏览: 90
实现 Vue 滚动条触底加载可以采用以下步骤:
1. 在模板中使用 `v-infinite-scroll` 指令监听滚动事件。
2. 在 data 中定义一个变量 `page` 用于记录当前页数,初始值为 1。
3. 在 methods 中定义一个方法 `loadMore`,在该方法中通过发送 API 请求获取更多数据,并将当前页数 `page` 加 1。
4. 在 `v-infinite-scroll` 指令中绑定 `loadMore` 方法,并设置触底距离 `distance` 和加载完成后是否启用 `disabled` 状态。
以下是示例代码:
```vue
<template>
<div class="container" v-infinite-scroll="loadMore" :distance="distance" :disabled="isLoading">
<div v-for="item in items" :key="item.id">{{ item.title }}</div>
<div v-if="isLoading">加载中...</div>
</div>
</template>
<script>
export default {
data() {
return {
page: 1,
items: [],
isLoading: false,
distance: 100, // 触底距离
};
},
methods: {
loadMore() {
if (this.isLoading) return;
this.isLoading = true;
axios.get(`/api/data?page=${this.page}`).then((res) => {
this.items = [...this.items, ...res.data.items];
this.page++;
this.isLoading = false;
});
},
},
};
</script>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![whl](https://img-home.csdnimg.cn/images/20210720083646.png)