[分享]掘金vue无限加载

无限加载是一个很常见的需求，当页面需要展示很多数据的时候，我们通常会将数据分页展示，但是如果数据量太大，分页也会失去效果。为了解决这个问题，我们可以使用无限加载技术，这个技术可以让页面的数据动态加载，...

无限加载是一个很常见的需求，当页面需要展示很多数据的时候，我们通常会将数据分页展示，但是如果数据量太大，分页也会失去效果。为了解决这个问题，我们可以使用无限加载技术，这个技术可以让页面的数据动态加载，避免页面卡顿或者运行缓慢的问题。

在Vue中，实现无限加载可以使用掘金vue-infinite-loading插件，这个插件非常简单易用，可以帮助我们快速实现无限加载功能。

 // 安装掘金vue-infinite-loading插件
  npm install vue-infinite-loading --save 

安装完成后，我们需要在main.js文件中引入并使用Vue.use()方法安装这个插件。

 import Vue from 'vue';
  import InfiniteLoading from 'vue-infinite-loading';

  Vue.use(InfiniteLoading); 

使用掘金vue-infinite-loading插件的步骤非常简单，只需要在需要无限加载的组件中使用<infinite-loading>元素即可，同时还要提供一个名为infinite-loading的事件并在触发时加载更多的数据。

 <template>
    <div>
      <ul>
        <li v-for="item in items">{{ item.text }}</li>
      </ul>
      <infinite-loading @infinite="loadMore"></infinite-loading>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        items: [], // 存储展示的数据
        page: 0 // 当前页码
      }
    },
    methods: {
      // 加载更多数据
      loadMore() {
        this.page++;
        // 调用api获取数据
        api.get('/data', { page: this.page }).then(res => {
          // 将新数据添加到items中
          this.items = this.items.concat(res.data);
          // 停止infinite-loading动画
          this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
        });
      }
    }
  }
  </script> 

在上面的示例中，我们定义了一个loadMore方法，在这个方法中调用api获取更多数据并将新数据添加到items数组中，这个方法会在infinite-loading事件被触发时被调用。

同时，我们还需要在<infinite-loading>元素中添加一个@infinite事件并绑定到loadMore方法上，在loadMore方法中通过调用api.get方法获取更多数据，然后将新数据添加到items数组中。

需要注意的是，在loadMore方法中，我们需要手动停止infinite-loading动画，否则会一直处于加载状态。

掘金vue-infinite-loading插件还提供了一些自定义选项，可以通过传递不同的选项来自定义无限加载的行为，例如设置加载动画的类型、设置加载错误时的提示信息等等。

总之，通过使用掘金vue-infinite-loading插件，我们可以轻松实现无限加载功能，使页面的数据动态加载，避免页面卡顿或者运行缓慢的问题。