无限滚动 (vue-infinite-loading)

vue-infinite-loading 是一个用于 Vue.js 应用的无限滚动组件，可以在用户滚动到页面底部时自动加载更多数据，常用于实现内容的懒加载。

提示

无限滚动 (vue-infinite-loading)官方文档链接：https://peachscript.github.io/vue-infinite-loading/#!/ (opens new window)

1. 基本用法

基本语法：在 Vue 组件中使用 <infinite-loading> 标签来实现无限滚动，通过绑定 @infinite 事件来触发数据加载。

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

    <infinite-loading @infinite="infiniteHandler">
      <span slot="no-more">没有更多内容了</span>
    </infinite-loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      currentPage: 1
    };
  },
  methods: {
    infiniteHandler($state) {
      this.loadMoreItems().then(newItems => {
        if (newItems.length) {
          this.items.push(...newItems);
          this.currentPage++;
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    },
    loadMoreItems() {
      // 模拟异步加载数据
      return new Promise(resolve => {
        setTimeout(() => {
          const data = [
            { id: this.items.length + 1, name: 'Item ' + (this.items.length + 1) }
          ];
          resolve(data);
        }, 1000);
      });
    }
  }
};
</script>

• @infinite 事件：在滚动到底部时触发，负责加载更多数据。
• slot="no-more"：用于在数据加载完成后显示自定义的提示信息。

2. InfiniteLoading 属性

参数	说明	类型	默认值
identifier	用于标识每个页面实例的唯一标识符	string	null
spinner	设置加载过程中的自定义指示器	string	default
force-use-infinite-wrapper	强制使用内置的 infinite-wrapper 进行滚动检测	boolean	false

• identifier：当你在同一个页面内需要使用多个无限滚动实例时，可以通过设置不同的 identifier 来区分它们。
• spinner：可以使用自定义的加载指示器（比如旋转图标、进度条等），让加载过程更加个性化。
• force-use-infinite-wrapper：在一些自定义滚动容器中，可能需要强制使用 infinite-wrapper 来确保滚动检测的准确性。

3. InfiniteLoading 事件

事件名	说明	回调参数
@infinite	当滚动到底部时触发的事件	$state（控制加载状态的对象）

• @infinite：核心事件，绑定后每次滚动到底部时会触发。回调参数 $state 用于控制无限滚动的状态（loaded() 表示加载完成，complete() 表示所有数据加载完成）。

4. InfiniteLoading 方法

方法名	说明	参数
loaded()	通知无限滚动加载已完成	无
complete()	通知无限滚动所有数据已加载	无
reset()	重置滚动状态	无

• loaded()：在数据加载完成时调用，告知无限滚动组件可以触发下一次滚动事件。
• complete()：在所有数据加载完成后调用，告知无限滚动组件不再触发加载事件。
• reset()：在数据或状态重置时调用，重新开始无限滚动（通常用于刷新列表）。

5. InfiniteLoading 插槽

名称	说明
no-more	当没有更多数据时显示的内容（插槽）
spinner	自定义加载指示器的内容（插槽）
error	在加载数据出错时显示的内容（插槽）

• no-more：自定义加载完成后的提示信息，通常用于显示 "没有更多内容了"。
• spinner：自定义加载过程中的指示器内容，通常用于显示加载动画。
• error：在加载数据时发生错误时显示的内容，通常用于显示错误提示或重试按钮。

6. 使用示例

基本使用

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

    <infinite-loading @infinite="infiniteHandler">
      <span slot="no-more">没有更多内容了</span>
    </infinite-loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      currentPage: 1
    };
  },
  methods: {
    infiniteHandler($state) {
      this.loadMoreItems().then(newItems => {
        if (newItems.length) {
          this.items.push(...newItems);
          this.currentPage++;
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    },
    loadMoreItems() {
      return new Promise(resolve => {
        setTimeout(() => {
          const data = [
            { id: this.items.length + 1, name: 'Item ' + (this.items.length + 1) }
          ];
          resolve(data);
        }, 1000);
      });
    }
  }
};
</script>

自定义加载指示器

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

    <infinite-loading @infinite="infiniteHandler">
      <template slot="spinner">
        <div class="custom-spinner">加载中...</div>
      </template>
      <span slot="no-more">没有更多内容了</span>
    </infinite-loading>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      currentPage: 1
    };
  },
  methods: {
    infiniteHandler($state) {
      this.loadMoreItems().then(newItems => {
        if (newItems.length) {
          this.items.push(...newItems);
          this.currentPage++;
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    },
    loadMoreItems() {
      return new Promise(resolve => {
        setTimeout(() => {
          const data = [
            { id: this.items.length + 1, name: 'Item ' + (this.items.length + 1) }
          ];
          resolve(data);
        }, 1000);
      });
    }
  }
};
</script>

<style scoped>
.custom-spinner {
  font-size: 16px;
  color: #007bff;
}
</style>

7. 总结

• 灵活性：vue-infinite-loading 通过事件和方法提供了灵活的无限滚动控制，适合各种复杂需求。
• 自定义性：支持通过插槽来自定义加载指示器、没有更多数据时的提示、错误处理等内容。
• 集成方便：适用于各种 Vue.js 应用，易于与现有项目集成。