首頁 > web前端 > js教程 > 主體

vue-infinite-loading2.0 中文文件詳解

亚连
發布: 2018-05-26 09:55:01
原創
1792 人瀏覽過

本篇文章主要介紹了vue-infinite-loading2.0 中文文件詳解,現在分享給大家,也給大家做個參考。

簡介

這是一個使用在Vue.js中的無限滾動插件,它可以幫助你快速創建一個無限滾動列表。

特點

  1. 行動端支援友善

  2. 相容於任何一個可以捲動的元素

  3. 有不同的旋轉器可以作為載入動畫

  4. 支援載入後顯示結果

  5. 支援兩個方向的無限載入

安裝

注意: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,
 }
...
登入後複製

開始

基礎使用

在本例中,我們將建立一個基本的無限清單,有以下三個步驟:

  1. 在你的範本中,用v-for建立一個清單

  2. 將InfiniteLoading元件放在清單的底部;

  3. 將InfiniteLoading元件的ref屬性設為infiniteLoading,因為要用它來觸發事件。

  4. 為InfiniteLoading元件建立並綁定一個載入回呼函數。

Template

#

<template>
 <p>
  <p v-for="item in list">
  Line:
  <span v-text="item"></span>
  </p>
  <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">  </infinite-loading>
 </p>
</template>
登入後複製

onInfinite函數中,每次我們都push 20 個數字到list陣列中。我們使用setTimeout來模擬非同步請求。最後,不要忘了觸發一個$InfiniteLoading:loaded事件,它將告訴InfiniteLoading元件,資料已經下載成功。

現在,我們可以根據上面的程式碼,來顯示效果。

範例:駭客新聞清單頁面

在這個範例中,我們將模仿一個駭客新聞列表頁面,但會用InfiniteLoading代替分頁

在開始這個例子之前,我們需要準備以下內容:

取得新聞清單的API,在本例中我們使用HN Search API

#匯入axios外掛程式來請求資料
  1. Template
  2. import InfiniteLoading from &#39;vue-infinite-loading&#39;;
    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(&#39;$InfiniteLoading:loaded&#39;);
       }, 1000);
      }
     },
     components: {
      InfiniteLoading
     }
    };
    登入後複製

在範本中,我們為駭客新聞清單建立了一個header 和一個list 。在這個例子中的InfiniteLoading組件,與上個例子中使用方式有些不同。我們基於slot自訂了沒有更多資料時的提示內容。

Script

<p class="hacker-news-list">
 <p 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>
</p>
<p 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="&#39;https://news.ycombinator.com/user?id=&#39; + item.author" rel="external nofollow" rel="external nofollow" 
    v-text="item.author"></a>
    |
   <a target="_blank" :href="&#39;https://news.ycombinator.com/item?id=&#39; + item.objectID" rel="external nofollow" rel="external nofollow" 
    v-text="item.num_comments + &#39; comments&#39;"></a>
  </small>
 </p>
</p>
 <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
 <span slot="no-more">
  There is no more Hacker News :(
 </span>
 </infinite-loading>
</p>
登入後複製

#在onInfinite函數中,我們請求了一頁的新聞,並且每次將它們推入到list數組中。如果我們請求了3頁新聞,將觸發 $InfiniteLoading:complete事件去告訴InfiniteLoading元件,現在已經沒有更多資料可以載入了。它將顯示我們自訂在模板中的,表示沒有更多資料的提示內容。

Style

import InfiniteLoading from &#39;vue-infinite-loading&#39;;
import axios from &#39;axios&#39;;
const api = &#39;http://hn.algolia.com/api/v1/search_by_date?tags=story&#39;;
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(&#39;$InfiniteLoading:loaded&#39;);
     if (this.list.length / 20 === 3) {
      this.$refs.infiniteLoading.$emit(&#39;$InfiniteLoading:complete&#39;);
     }
    } else {
     this.$refs.infiniteLoading.$emit(&#39;$InfiniteLoading:complete&#39;);
    }
   });
  }
 },
 components: {
  InfiniteLoading
 }
};
登入後複製

#

與濾鏡一塊使用

在上個範例的基礎上,我們將在頭部建立一個下拉選擇作為過濾器,當我們改變過濾器,清單將會重新載入。

Template

.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;
}
登入後複製

#Script

##
<p class="hacker-news-list">
<p 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>
</p>
<p 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="&#39;https://news.ycombinator.com/user?id=&#39; + item.author" rel="external nofollow" rel="external nofollow" 
     v-text="item.author"></a>
   |
   <a target="_blank" :href="&#39;https://news.ycombinator.com/item?id=&#39; + item.objectID" rel="external nofollow" rel="external nofollow" 
     v-text="item.num_comments + &#39; comments&#39;"></a>
  </small>
 </p>
</p>
<infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
 <span slot="no-more">
  There is no more Hacker News :(
 </span>
</infinite-loading>
</p>
登入後複製

changeFilter函數中,我們清楚了列表並等待DOM更新,然後我們觸發$InfiniteLoading:reset事件,目的是讓 InfiniteLoading 元件回到最初狀態,它將立刻要求新的資料。

Style

在上個範例基礎上增加樣式

import InfiniteLoading from &#39;vue-infinite-loading&#39;;
import axios from &#39;axios&#39;;
const api = &#39;http://hn.algolia.com/api/v1/search_by_date&#39;;
export default {
 data() {
  return {
   list: [],
   tag: &#39;story&#39;
  };
 },
 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(&#39;$InfiniteLoading:loaded&#39;);
     if (this.list.length / 20 === 10) {
      this.$refs.infiniteLoading.$emit(&#39;$InfiniteLoading:complete&#39;);
     }
    } else {
     this.$refs.infiniteLoading.$emit(&#39;$InfiniteLoading:complete&#39;);
    }
   });
  },
  changeFilter() {
   this.list = [];
   this.$nextTick(() => {
    this.$refs.infiniteLoading.$emit(&#39;$InfiniteLoading:reset&#39;);
   });
  }
 },
 components: {
  InfiniteLoading
 }
};
登入後複製

< ;p id="server">服務端渲染

服务端渲染(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 &#39;vue-infinite-loading/src/components/Infiniteloading.vue&#39;;
登入後複製

代替

 import InfiniteLoading from &#39;vue-infinite-loading&#39;;
登入後複製

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   &#39;default&#39;
登入後複製

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   &#39;bottom&#39;
登入後複製

事件

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&#39;s value].$emit(&#39;$InfiniteLoading:loaded&#39;);
  } else {
   this.$refs[your ref attirbute&#39;s value].$emit(&#39;$InfiniteLoading:complete&#39;);
  }
 });
}
登入後複製

$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>
登入後複製

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

jquery中的ajax如何返回结果而非回调方式即为同顺序执行

ajax实现点击不同的链接让返回的内容显示在特定div里

Jquery $.ajax函数外的一段代码的执行顺序

以上是vue-infinite-loading2.0 中文文件詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!