InfiniteScroll 是
Element 组件库中的一个
组件，它可以实现在
滚动到页面底部时自动加载更多数据的功能，常用于展示长列表或分页数据。
在
Vue 实例中使用
InfiniteScroll 组件，需要先在
组件中引入它：
```
js
import {
InfiniteScroll } from '
element-ui';
export default {
directives: {
InfiniteScroll },
// ...
}
```
然后，将
InfiniteScroll 组件作为一个自定义指令绑定到需要实现
无限滚动的元素上。例如，将其绑定到一个包含数据列表的 `ul` 元素上：
```html
<ul v-
infinite-scroll="loadMore"
infinite-scroll-disabl
ed="loading"
infinite-scroll-distance="10">
<li v-for="item in list" :key="item.id">{{ item.text }}</li>
</ul>
```
在这个例子中，`v-
infinite-scroll` 指令绑定了一个名为 `loadMore` 的方法，它会在
滚动到页面底部时被触发，用于加载更多数据。`
infinite-scroll-disabl
ed` 属性指定了一个布尔值，用于控制是否禁用
无限滚动功能。`
infinite-scroll-distance` 属性指定了一个数字，表示
滚动到页面底部的距离阈值，当
滚动距离小于该值时，不触发 `loadMore` 方法。
最后，在
Vue 实例中定义 `loadMore` 方法，用于加载更多数据。例如，可以在该方法中向服务器发送 AJAX 请求，获取更多数据并将其添加到数据列表中：
```
js
export default {
directives: {
InfiniteScroll },
data() {
return {
list: [], // 数据列表
loading: false, // 是否正在加载数据
page: 1, // 当前页码
pageSize: 10, // 每页数据量
};
},
methods: {
async loadMore() {
if (this.loading) return; // 如果正在加载数据，则不执行
this.loading = true; // 标记为正在加载数据
try {
const res = await axios.get('/api/data', {
params: {
page: this.page + 1,
pageSize: this.pageSize,
},
});
this.list.push(...res.data); // 将新数据添加到列表中
this.page += 1; // 更新页码
} catch (err) {
console.
error(err);
}
this.loading = false; // 标记为加载数据完成
},
},
};
```
这样，当用户
滚动到页面底部时，就会触发 `loadMore` 方法，从服务器获取更多数据并将其添加到列表中，实现
无限滚动的效果。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
