列表分页转无限滚动，使用Vue-infinite-loading实现

Vue-infinite-loading 官方文档：peachscript.github.io/vue-infinit...

安装插件

NPM

推荐在构建大型应用的时候使用这种方式进行安装。

复制代码

npm install vue-infinite-loading -S

引用插件

组件形式

你可以直接将它当做一个自定义组件进行引用：

xml 复制代码

<template>
  <infinite-loading></infinite-loading>
</template>

<script>
import InfiniteLoading from 'vue-infinite-loading';

export default {
  components: {
    InfiniteLoading,
  },
};
</script>

全局引入

javascript 复制代码

// main.js or index.js
import InfiniteLoading from 'vue-infinite-loading';

Vue.use(InfiniteLoading, { /* 配置 */ });

使用插件

自定义加载提示

ini 复制代码

<infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
        <div slot="spinner">加载中...</div>
        <div slot="no-more">没有更多了</div>
        <div slot="no-results">没有更多了</div>
</infinite-loading>

加载到底部重置滚动插件

kotlin 复制代码

this.$refs.infiniteLoading.stateChanger.reset(); // 重置无限滚动加载组件的状态

监听infinite

$state.loaded 方法通知插件我们已经拿到数据了

$state.complete 方法通知插件所有数据都加载完了

kotlin 复制代码

infiniteHandler($state) {
      axios.get(api, {
        params: {
          page: this.page,
        },
      }).then(({ data }) => {
        if (data.hits.length) {
          this.page += 1;
          this.list.push(...data.hits);
          $state.loaded();
        } else {
          $state.complete();
        }
      });
    },

配合Element UI使用见官方文档

peachscript.github.io/vue-infinit...

自定义数据列

xml 复制代码

<template>
    <div id="app">
        <!-- 数据列表容器 -->
        <ul>
            <li v-for="(item, index) in items" :key="index">{{ item }}</li>
        </ul>

        <!-- 加载组件 -->
        <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">
            <div slot="spinner">加载中...</div>
            <div slot="no-more">没有更多了</div>
            <div slot="no-results">没有更多了</div>
        </infinite-loading>
    </div>
</template>

注意事项

处理没有更多数据的情况

当数据加载完毕时，需要调用 $state.complete() 来通知插件停止加载。否则，插件会继续尝试加载数据。

避免重复加载

在每次加载新数据时，确保对数据进行去重或分页控制，避免重复加载相同的数据。

错误处理

在实际项目中，网络请求可能会失败。需要在 loadMore 方法中处理错误情况，并调用 $state.error() 来显示错误状态。

示例：

kotlin 复制代码

loadMore($state) {
  this.$http.get('/api/data', { params: { page: this.page } })
    .then((response) => {
      const newData = response.data;
      if (newData.length > 0) {
        this.list = this.list.concat(newData);
        this.page += 1;
        $state.loaded();
      } else {
        $state.complete();
      }
    })
    .catch(() => {
      $state.error(); // 显示错误状态
    });
}

动态更新数据

如果数据源是动态更新的（例如用户切换筛选条件），需要手动重置 infinite-loading 组件的状态。

示例：

ini 复制代码

resetData() {
  this.list = [];
  this.page = 1;
  this.$refs.infiniteLoading.stateChanger.reset(); // 重置状态
}

常见问题与解决方法

滚动到底部未触发加载

检查容器是否有滚动条。

确保 infinite-loading 组件位于正确的滚动容器内。如果使用的是自定义滚动容器，可以通过 identifier 属性指定滚动容器。

css 复制代码

<div id="scroll-container" style="height: 500px; overflow-y: auto;">
  <ul>
    <li v-for="(item, index) in list" :key="index">{{ item }}</li>
  </ul>
  <infinite-loading @infinite="loadMore" identifier="scroll-container" />
</div>

加载完成后仍触发加载事件

确保在没有更多数据时调用了 $state.complete()。避免在 loadMore 方法中重复添加数据。

多次快速滚动导致多次触发加载

在 loadMore 方法中添加防抖逻辑，避免短时间内多次触发加载。