今天在看前同事做的项目时，了解到一款可以实现无限加载的vue插件vue-infinite-loading

具体实现后的效果就是，当你在下拉一个菜单时，当下拉一定数量时，有一个加载等待的效果，然后再继续显示。并且利用插槽slot实现获取菜单完成后的提示。贴上链接：https://peachscript.github.io/vue-infinite-loading/#!/

现在，我们通过一个简单的demo来用一下：

首先npm安装一下：

npm i vue-infinite-loading --save-dev

然后在script中引入并在组件components中声明：

mport InfiniteLoading from "vue-infinite-loading";
export default {
  data() {
    return {
      lists: []
    };
  },
  components: {
    InfiniteLoading
  }

使用方法就是在一个v-for的遍历下面，写入该组件，贴下template结构

<template>
  <div class="hello">
    <ul v-for="(list, index) in lists" :key="index">
      <li>{{list}}</li>
    </ul>
    <infinite-loading @infinite='onInfinite' ref="infiniteLoading" spinner="circles">
      <span slot="no-more">没有啦</span> 
    </infinite-loading>
  </div>
</template>

infiniteLoading组件上绑定监听infinite事件，我们在onInfinite方法中控制滚动的逻辑，贴下完整demo

<template>
  <div class="hello">
    <ul v-for="(list, index) in lists" :key="index">
      <li>{{list}}</li>
    </ul>
    <infinite-loading @ ='onInfinite' ref="infiniteLoading" spinner="circles">
      <span slot="no-more">没有啦</span> 
    </infinite-loading>
  </div>
</template>

<script>
import InfiniteLoading from "vue-infinite-loading";
export default {
  data() {
    return {
      lists: []
    };
  },
  components: {
    InfiniteLoading
  },
  methods: {
    onInfinite($state) {
      setTimeout(() => {
        const tmp = [];
        for (let i = this.lists.length + 1; i <= this.lists.length + 20; i++) {
          tmp.push(i);
        }
        this.lists = this.lists.concat(tmp);
        this.$refs.infiniteLoading.$emit("$InfiniteLoading:loaded");
        // $state.loaded()
        if(this.lists.length >= 80){
          $state.complete()
        }
      }, 1000);
    }
  }
};
</script>

这里使用setTimeout来实现异步，当组件渲染出来后，会先自动执行onInfinite，遍历出1到20。这里注意要$emit("$InfiniteLoading:loaded") 来告诉组件成功加载。通过判断数据的长度是否执行complete()，会显示slot='no-more'的内容。

项目中，数据都是在通过http请求获取到的。我们可以把请求的代码写到onInfinite中，并且通过在请求中传递参数实现分页的效果。然后判断某个变量，来控制是否加载完。