无限滚动 (InfiniteScroll)

Element-UI 的 InfiniteScroll 组件用于在用户滚动到页面底部时，自动加载更多的数据。这种技术常用于长列表或内容流页面，以提升用户体验，减少加载时的等待时间。

提示

InfiniteScroll 无限滚动组件官方文档：https://element.eleme.cn/#/zh-CN/component/infiniteScroll (opens new window)

1. 基本用法

基本语法：使用 v-infinite-scroll 指令绑定在需要滚动的元素上，当用户滚动到该元素的底部时，会自动触发加载更多数据的函数。

<template>
  <ul
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="loading"
    infinite-scroll-distance="10">
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 数据列表
      loading: false // 加载状态
    };
  },
  methods: {
    loadMore() {
      if (this.loading) return;
      this.loading = true;

      // 模拟异步数据加载
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.items.push({ id: this.items.length + 1, name: `Item ${this.items.length + 1}` });
        }
        this.loading = false;
      }, 1000);
    }
  }
};
</script>

• 无限滚动：通过 v-infinite-scroll 指令绑定在 <ul> 元素上，当用户滚动到底部时自动加载更多数据。
• 禁用加载：使用 infinite-scroll-disabled 属性控制何时禁用加载功能，如在加载数据时暂时禁用。

InfiniteScroll 属性

参数	说明	类型	可选值	默认值
infinite-scroll-disabled	是否禁用无限滚动功能	boolean	—	false
infinite-scroll-delay	节流时延，单位为 ms，控制滚动事件的触发频率	number	—	200
infinite-scroll-distance	触发加载的距离阈值，单位为 px，当滚动到距离底部多远时触发加载	number	—	0
infinite-scroll-immediate	是否立即执行加载方法，以防初始状态下内容无法撑满容器	boolean	—	true

2. InfiniteScroll 常用示例

基本使用

通过 v-infinite-scroll 指令在一个 div 或 ul 元素上实现无限滚动加载数据。

<template>
  <div
    v-infinite-scroll="loadMore"
    style="height: 400px; overflow-y: auto;"
    infinite-scroll-distance="20">
    <div v-for="item in items" :key="item.id" style="padding: 10px;">{{ item.name }}</div>
  </div>
</template>

• 滚动容器：将 v-infinite-scroll 指令绑定在可滚动的容器上，确保容器有足够的高度和内容以触发滚动事件。
• 触发距离：通过 infinite-scroll-distance 设置触发加载的距离阈值。

禁用无限滚动

可以通过 infinite-scroll-disabled 属性在特定情况下禁用无限滚动功能，如加载中或数据加载完成时。

<template>
  <div
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="loading || noMoreData">
    <div v-for="item in items" :key="item.id">{{ item.name }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      noMoreData: false
    };
  },
  methods: {
    loadMore() {
      if (this.loading || this.noMoreData) return;
      this.loading = true;

      setTimeout(() => {
        const newItems = [];
        for (let i = 0; i < 10; i++) {
          newItems.push({ id: this.items.length + 1, name: `Item ${this.items.length + 1}` });
        }
        this.items.push(...newItems);

        // 模拟加载完成
        if (this.items.length >= 50) {
          this.noMoreData = true;
        }

        this.loading = false;
      }, 1000);
    }
  }
};
</script>

• 禁用加载：在加载过程中或加载完成时使用 infinite-scroll-disabled 来禁用无限滚动。

立即执行加载

在初始加载内容无法撑满容器的情况下，可以使用 infinite-scroll-immediate 属性立即执行加载。

<template>
  <div
    v-infinite-scroll="loadMore"
    infinite-scroll-immediate="true">
    <div v-for="item in items" :key="item.id">{{ item.name }}</div>
  </div>
</template>

• 立即执行加载：当内容不足以撑满容器时，infinite-scroll-immediate 属性可以让加载函数在组件挂载后立即执行。

3. 总结

• 灵活控制：InfiniteScroll 组件通过多种属性允许你灵活控制加载行为，包括禁用、节流、触发距离等。
• 适用场景：常用于长列表、内容流页面等场景，帮助减少用户等待时间和提升页面性能。
• 节流机制：通过 infinite-scroll-delay 属性，避免滚动事件触发过于频繁，提升性能。

InfiniteScroll 组件为开发者提供了一个简便的方式来实现自动加载更多数据的功能，可以根据项目需求进行配置和扩展。