简介

这是一个使用在Vue.js中的无限滚动插件，它可以帮助你快速创建一个无限滚动列表。

特点

移动端支持友好
兼容任何一个可以滚动的元素
有不同的旋转器可以作为加载动画
支持加载后显示结果
支持两个方向的无限加载

安装

注意：vue-infinite-loading2.0只能在Vue.js2.0中使用。如果你想在Vue.js1.0中使用，请安装vue-infinite-loading1.3版本

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,

  },

};

其他方式

<script src="/path/to/vue-infinite-loading/dist/vue-infinite-loading.js"></script>

vue-infinite-loading.js会注册一个全局变量VueInfiniteLoading,使用时需要这样：

 ...

 components: {

     VueInfiniteLoading:VueInfiniteLoading.default,

 }

...

开始

基础使用

在本例中，我们将创建一个基本的无限列表,有如下三个步骤：

Template

<template>

  <div>

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

    Line:

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

    </p>

    <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">    </infinite-loading>

  </div>

</template>

Script

import InfiniteLoading from 'vue-infinite-loading';

export default {

  data() {

    return {

      list: []

    };

  },

  methods: {

    onInfinite() {

      setTimeout(() => {

        const temp = [];

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

          temp.push(i);

        }

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

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

      }, 1000);

    }

  },

  components: {

    InfiniteLoading

  }

};

在onInfinite函数中，每次我们都push 20 个数字到list数组中。我们使用setTimeout来模拟异步请求。最后，不要忘了触发一个$InfiniteLoading:loaded事件,它将告诉InfiniteLoading组件，数据已经下载成功。

现在，我们可以根据上面的代码，来显示效果。

例子：黑客新闻列表页面

在这个例子中，我们将模仿一个黑客新闻列表页面，但是会用InfiniteLoading代替分页

在开始这个例子之前，我们需要准备以下内容：

获取新闻列表的API,在本例中我们使用 HN Search API
导入axios插件来请求数据

Template

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

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

    <a target="_blank" href="http://www.ycombinator.com/">

      ![](https://news.ycombinator.com/y18.gif)

    </a>

    <span>Hacker News</span>

</div>

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

  <span class="num" v-text="key + 1"></span>

  <p>

    <a target="_blank" :href="item.url" v-text="item.title"></a>

  </p>

  <p>

    <small>

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

      points by

      <a target="_blank" :href="'https://news.ycombinator.com/user?id=' + item.author"

       v-text="item.author"></a>

        |

      <a target="_blank" :href="'https://news.ycombinator.com/item?id=' + item.objectID"

       v-text="item.num_comments + ' comments'"></a>

    </small>

  </p>

</div>

  <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">

  <span slot="no-more">

    There is no more Hacker News :(

  </span>

  </infinite-loading>

</div>

在模板中，我们为黑客新闻列表创建了一个header 和一个list 。在这个例子中的InfiniteLoading组件，与上个例子中使用方式有些不同。我们基于slot自定义了当没有更多数据时的提示内容。

Script

import InfiniteLoading from 'vue-infinite-loading';

import axios from 'axios';

const api = 'http://hn.algolia.com/api/v1/search_by_date?tags=story';

export default {

  data() {

    return {

      list: []

    };

  },

  methods: {

    onInfinite() {

      axios.get(api, {

        params: {

          page: this.list.length / 20 + 1

        }

      }).then((res) => {

        if (res.data.hits.length) {

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

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

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

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

          }

        } else {

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

        }

      });

    }

  },

  components: {

    InfiniteLoading

  }

};

在onInfinite函数中，我们请求了一页的新闻，并且每次将它们推入到list数组中。如果我们请求了3页新闻，将触发 $InfiniteLoading:complete事件去告诉InfiniteLoading组件，现在已经没有更多数据可以加载了。它将显示我们自定义在模板中的，表示没有更多数据的提示内容。

Style

.hacker-news-list .hacker-news-item {

   margin: 10px 0;

   padding: 0 10px 0 32px;

   line-height: 16px;

   font-size: 14px;

}

.hacker-news-list .hacker-news-item .num {

  margin-top: 1px;

  margin-left: -32px;

  float: left;

  width: 32px;

  color: #888;

  text-align: right;

}

.hacker-news-list .hacker-news-item p {

  padding-left: 8px;

  margin: 0;

}

.hacker-news-list .hacker-news-item .num:after {

  content: ".";

}

.hacker-news-list .hacker-news-item p>a {

  color: #333;

  padding-right: 5px;

}

.hacker-news-list .hacker-news-item p a {

  text-decoration: none;

}

.hacker-news-list .hacker-news-item p small, .hacker-news-list .hacker-news-item p small a {

  color: #888;

}

与过滤器一块使用

在上个例子的基础上，我们将在头部创建一个下拉选择作为过滤器，当我们改变过滤器，列表将会重新加载。

Template

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

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

  <a target="_blank" href="http://www.ycombinator.com/">

    ![](https://news.ycombinator.com/y18.gif)

  </a>

  <span>Hacker News</span>

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

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

    <option value="poll">Poll</option>

    <option value="show_hn">Show hn</option>

    <option value="ask_hn">Ask hn</option>

    <option value="front_page">Front page</option>

 </select>

</div>

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

  <span class="num" v-text="key + 1"></span>

  <p>

    <a target="_blank" :href="item.url" v-text="item.title"></a>

  </p>

  <p>

    <small>

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

      points by

      <a target="_blank" :href="'https://news.ycombinator.com/user?id=' + item.author"

         v-text="item.author"></a>

      |

      <a target="_blank" :href="'https://news.ycombinator.com/item?id=' + item.objectID"

         v-text="item.num_comments + ' comments'"></a>

    </small>

  </p>

</div>

<infinite-loading :on-infinite="onInfinite" 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';

const api = 'http://hn.algolia.com/api/v1/search_by_date';

export default {

  data() {

    return {

      list: [],

      tag: 'story'

    };

  },

  methods: {

    onInfinite() {

      axios.get(api, {

        params: {

          tags: this.tag,

          page: this.list.length / 20 + 1

        }

      }).then((res) => {

        if (res.data.hits.length) {

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

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

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

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

          }

        } else {

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

        }

      });

    },

    changeFilter() {

      this.list = [];

      this.$nextTick(() => {

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

      });

    }

  },

  components: {

    InfiniteLoading

  }

};

在changeFilter函数中，我们清楚了列表并等待DOM更新，然后我们触发一个$InfiniteLoading:reset事件，目的是让 InfiniteLoading 组件回到最初状态，它将立刻请求新的数据。

Style

在上个例子基础上增加样式

.demo-inner {

  margin-left: 20px;

  width: 261px;

  height: 455px;

  border: 1px solid #ccc;

  overflow: auto;

}

.hacker-news-list .hacker-news-header {

    padding: 2px;

    line-height: 14px;

    background-color: #f60;

}

.hacker-news-list {

  min-height: 455px;

  background-color: #f6f6ef;

}

.hacker-news-list .hacker-news-header select {

    float: right;

    color: #fff;

    background-color: transparent;

    border: 1px solid #fff;

    outline: none;

}

服务端渲染

服务端渲染(SSR)是Vue.js2.0的新特性，当你在你的SSR应用中使用这个组件，会得到类似这样的错误：

Error: window is not defined

ReferenceError: window is not defined

    at ...

    at ...

    at e.exports (...)

    at Object. (...)

    at p (...)

    at Object.e.exports.render.e (...)

    at p (...)

    at Object. (...)

    at p (...)

    at e.__esModule.default (...)

因为style-loader不支持在这个时候本地导出，详情点这里,所以我们需要下面的变通方案，为了你的SSR应用：

用

 import InfiniteLoading from 'vue-infinite-loading/src/components/Infiniteloading.vue';

代替

 import InfiniteLoading from 'vue-infinite-loading';

npm install less less-loader --save-dev 如果你还没有安装它们。

然后你的SSR应用应该运行良好。如果不是，你可以加入这个issue去讨论。

属性

on-infinite
这是一个回调函数，当滚动到距离滚动父元素底部特定距离的时候，会被调用。
通常，在数据加载完成后，你应该在这个函数中发送$InfiniteLoading:loaded事件。

- type           Function

- reuqired       true

distance
这是滚动的临界值。如果到滚动父元素的底部距离小于这个值，那么on-infinite回调函数就会被调用。

- type         Number

- required     false

- default      100

- unit         pixel

spinner
通过这个属性，你可以选择一个你最喜爱旋转器作为加载动画。点击这里可以看到所有可用的旋转器。

- type         String

- required     false

- default     'default'

ref
正如你所知，这个属性是一个Vue.js的官方指令，用来获取子组件的实例。我们需要用它来得到 InfiniteLoading 组件的实例来发送事件。你可以用这种方式来得到实例：this.$refs[the value of ref attribute].

- type     String

- required     true

direction
如果你设置这个属性为top,那么这个组件将在你滚到顶部的时候，调用on-infinite函数。
警告：你必须在数据加载后，手动地将滚动父元素的scrollTop设置为正确的值，否则，该组件会一次又一次调用on-infinite函数。

- type         String

- default     'bottom'

事件

InfiniteLoading 组件将处理一下事件。如果你需要通过组件的实例来$emit,则可以通过ref属性来得到组件实例。

$InfiniteLoading:loaded
通常，你需要在数据加载后发送这个事件， InfiniteLoading组件将隐藏加载动画，并且准备下一次触发。

$InfiniteLoading:complete
如果InfiniteLoading组件就不会接收$InfiniteLoading:loaded，当你发送这个事件后，它将为用户显示一个没有结果的提示。如果InfiniteLoading组件接收过$InfiniteLoading:loaded，当你发送这个事件的时候，它会为用户显示一个没有更多内容的提示。你可以利用slot来自定义需要显示的内容。
你的onInfinite函数可能像这个样子：

onInfinite() {

    this.$http.get(url, (res) => {

    if (res.data) {

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

      this.$refs[your ref attirbute's value].$emit('$InfiniteLoading:loaded');

    } else {

      this.$refs[your ref attirbute's value].$emit('$InfiniteLoading:complete');

    }

  });

}

$InfiniteLoading:reset
InfiniteLoading组件将会回到最初的状态，并且on-infinite函数将会立刻被调用。大部分情况下，如果你把这个组件同过滤器或制表符一起使用，这个事件还是有用的。

插槽

你可以利用slot自定义提示的内容，当然，如果你喜欢的话，也可以使用默认内容：

  <span slot="{{ slot name }}">

    {{ Your content }}

 </span>

no-results
当InfiniteLoading组件接收到$InfiniteLoading:complete 事件并且它没有接收过$InfiniteLoading:loaded事件时，这个内容会显示出来。

- type       String

- default     No results :(

no-more
当InfiniteLoading组件接收到$InfiniteLoading:complete 事件并且它已经接收过$InfiniteLoading:loaded事件时，这个内容会出现。

spinner
如果，你不喜欢当前旋转器，你可以自定义自己的旋转器作为加载时的动画。

- type         HTML

- default     default spinner

旋转器

你可以用spinner属性，选择你最喜爱的旋转器作为加载动画:

  <infinite-loading spinner="{{ spinner name }}"></infinite-loading>

点击这里可以查看几个可用的旋转器。

作者：no_shower
链接：https://www.jianshu.com/p/bfb5ca56b4fb
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

vue-infinite-loading2.0 中文文档

简介

特点

<p id="installation">安装</p>

导入方式

es6模块导入方式

CommonJS 模块导入方式

其他方式

开始

基础使用

Template

Script

<p id="hacker">例子：黑客新闻列表页面</p>

Template

Script

Style

<p id="use">与过滤器一块使用</p>

Template

Script

Style

<p id="server">服务端渲染</p>

<p id="properties">属性<p>

<p id="event">事件</p>

<p id="slots">插槽</p>

<p id="spinners">旋转器</p>

vue-infinite-loading2.0 中文 文档的相关教程结束。

相关推荐

vue如何使用async和await

SpringBoot的官方英文介绍（中文译本）

vue怎么引用外部js库

部署vue项目找不到js和css文件如何解决

怎么改造Vue SSR服务端渲染

Vue中怎么实现组件间数据通信

Vue中如何使用事件修饰符

Vue中ref 如何使用