做vue项目用到下拉滚动加载数据功能，由于选的UI库（element）没有这个组件，就用Vue-infinite-loading 这个插件代替，使用中遇到的一些问题及使用方法，总结作记录！

安装：npm install vue-infinite-loading –save

引入

ES6

import InfiniteLoading from 'vue-infinite-loading';

export default {

  components: {

    InfiniteLoading,

  },

};

CommonJS

const InfiniteLoading = require('vue-infinite-loading');

export default {

  components: {

    InfiniteLoading,

  },

};

1.用法一（基本用法）

Template

<div>

  <p v-for="item in list">

    Line:

    <span v-text="item"></span>

  </p>

  <!--infinite-loading这个组件要放在列表的底部，滚动的盒子里面！-->

  <infinite-loading @infinite="infiniteHandler"></infinite-loading>

</div>

Script

import InfiniteLoading from 'vue-infinite-loading';

export default {

  data() {

    return {

      list: [],

    };

  },

  methods: {

    infiniteHandler($state) {

      setTimeout(() => {

        const temp = [];

        for (let i = this.list.length + ; i <= this.list.length + ; i++) {

          temp.push(i);

        }

        this.list = this.list.concat(temp);

        $state.loaded();

      }, );

    },

  },

  components: {

    InfiniteLoading,

  },

};

2.用法二（一般的分页数据）

Template

<div class="hacker-news-list">

  <ul>

      <li class="hacker-news-item" v-for="(item, key) in list"></li>

  </ul>

  <infinite-loading @infinite="infiniteHandler">

    <span slot="no-more">

      There is no more Hacker News

    </span>

  </infinite-loading>

</div>

Script

import InfiniteLoading from 'vue-infinite-loading';

import axios from 'axios';

export default {

  data() {

    return {

      list: [],

    };

  },

  methods: {

    infiniteHandler($state) {

     const api="http://xxxx.com/xxx"

      axios.get(api, {   //api为你请求数据地址

        params: {

          page: this.list.length /  + ,   //页码参数（10条每页）

        },

      }).then((response) => {

        if (response.data.length) {

          this.list = this.list.concat(response.data);  //response.data为你请求接口返回的数组列表

          $state.loaded();

          if (this.list.length /  === ) {

            $state.complete(); //这里是加载了10页数据，设置不在加载

          }

        } else {

          $state.complete();

        }

      });

    },

  },

  components: {

    InfiniteLoading,

  },

};

$state: 该组件会传递一个特殊的事件参数$state给事件处理器来改变加载状态，
$state参数包括三个方法，它们是loaded方法，complete方法和reset方法。

• loaded方法用于在每次加载数据后停止播放动画，然后该组件将准备好进行下一次触发。
• complete方法用于完成完整的无限加载，则该组件将不再处理任何滚动操作。如果在loaded调用complete方法时永远不会调用该方法，则此组件将显示用户的否结果消息，如果不是，则将显示不再有用户消息，并且可以按slot设其它内容
• reset方法是将组件返回到原来的状态

3.用法三

一般的无限滚动下拉加载数据会带有筛选条件。比如根据不同条件选择出来的列表，或者改变某个状态重新渲染列表就要用这个用法了

Template

<div class="hacker-news-list">

  <div class="hacker-news-header">

     <!--下拉改变-->

    <select v-model="tag" @change="changeFilter()">

      <option value="story">Story</option>

    </select>

      <!--或者点击改变-->

    <button @click="changeFilter()">搜索</button>

  </div>

  <ul>

      <li class="hacker-news-item" v-for="(item, key) in list"></li>

   </ul>

  <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">  <!--不要忘记设置这个 ref="infiniteLoading"-->

    <span slot="no-more">

      There is no more Hacker News

    </span>

  </infinite-loading>

</div>

Script

import InfiniteLoading from 'vue-infinite-loading';

import axios from 'axios';

export default {

  data() {

    return {

      list: [],

      tag: 'story',

    };

  },

  methods: {

    infiniteHandler($state) {

      const api="http://xxxx.com/xxx"

      axios.get(api, {   //api为你请求数据地址

        params: {

          tags: this.tag,  //改变的条件参数

          page: this.list.length /  + ,

        },

      }).then(({ data }) => {

        if (data.hits.length) {

          this.list = this.list.concat(data.hits);

          $state.loaded();

          if (this.list.length /  === ) {

            $state.complete();

          }

        } else {

          $state.complete();

        }

      });

    },

    //改变条件条用此方法

    changeFilter() {

      this.list = [];

      this.$nextTick(() => {

        this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');

      });

    },

  },

  components: {

    InfiniteLoading,

  },

};

4.其他用法（特殊条件手动触发）

在大多数情况下，我们希望立即为空列表加载数据，这也是该组件的默认行为。如果你只想控制第一次加载，你可以简单地使用v-if和v-else指令来实现它,但是如果，在一些复杂的情况下，我们需要手动每三页加载一次数据，我们可以使用该方法，

这里我不做详细介绍。有这个需求的可以去看看官方文档：vue-infinite-loading