简介

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

特点

移动端支持友好

兼容任何一个可以滚动的元素

有不同的旋转器可以作为加载动画

支持加载后显示结果

支持两个方向的无限加载

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

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

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 }};

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

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

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

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

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

获取新闻列表的API,在本例中我们使用 HN Search API

导入axios插件来请求数据

Template

<div class="hacker-news-list"> <div class="hacker-news-header"> <a target="_blank" href="http://plete </strong>事件并且它已经接收过<strong>$InfiniteLoading:loaded</strong>事件时，这个内容会出现。

spinner

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

- type HTML- default default spinner

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

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

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

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

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