vue-infinite-loading2.0 中文文档详解

程序员文章站 2022-06-14 11:37:42

简介这是一个使用在vue.js中的无限滚动插件，它可以帮助你快速创建一个无限滚动列表。特点移动端支持友好兼容任何一个可以滚动的元素有不同...

简介

这是一个使用在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,
 }
...

开始

基础使用

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

在你的模板中，用v-for创建一个列表
将infiniteloading组件放在列表的底部；
将infiniteloading组件的ref属性设置为infiniteloading，因为要用它来触发事件。
为infiniteloading组件创建并绑定一个加载回调函数。

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
导入插件来请求数据

template

<div class="hacker-news-list">
 <div class="hacker-news-header">
  <a target="_blank" href="http://www.ycombinator.com/" rel="external nofollow" rel="external nofollow" >
   ![](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" rel="external nofollow" rel="external nofollow" 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" rel="external nofollow" rel="external nofollow" 
    v-text="item.author"></a>
    |
   <a target="_blank" :href="'https://news.ycombinator.com/item?id=' + item.objectid" rel="external nofollow" rel="external nofollow" 
    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/" rel="external nofollow" rel="external nofollow" >
  ![](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" rel="external nofollow" rel="external nofollow" 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" rel="external nofollow" rel="external nofollow" 
     v-text="item.author"></a>
   |
   <a target="_blank" :href="'https://news.ycombinator.com/item?id=' + item.objectid" rel="external nofollow" rel="external nofollow" 
     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，当你发送这个事件的时候，它会为用户显示一个没有更多内容的提示。你可以利用来自定义需要显示的内容。

你的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>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： vue组件与复用详解

下一篇： ps图层怎么解锁? ps解锁图片的详细教程

vue-infinite-loading2.0 中文文档详解

python 读写中文json的实例详解

详解Node.js读写中文内容文件操作

php用正则表达式匹配中文实例详解

Word2003中繁体中文文档创建介绍

详解Linux环境下使Nginx服务器支持中文url的配置流程

C#基于纯数学方法递归实现货币数字转换中文功能详解

使用Doxygen生成全中文的chm、pdf帮助文档的方法

vue组件文档（.md）中如何自动导入示例（.vue）详解

JS日程管理插件FullCalendar中文说明文档

android读写中文如何避免乱码详解