vue-infinite-loading2.0 中文文檔詳解
簡介
這是一個(gè)使用在Vue.js中的無限滾動(dòng)插件，它可以幫助你快速創(chuàng)建一個(gè)無限滾動(dòng)列表。
特點(diǎn)
- 移動(dòng)端支持友好
- 兼容任何一個(gè)可以滾動(dòng)的元素
- 有不同的旋轉(zhuǎn)器可以作為加載動(dòng)畫
- 支持加載后顯示結(jié)果
- 支持兩個(gè)方向的無限加載
<p id="installation">安裝</p>
<strong>注意：vue-infinite-loading2.0只能在Vue.js2.0中使用。如果你想在Vue.js1.0中使用，請(qǐng)安裝vue-infinite-loading1.3版本</strong>
npm install vue-infinite-loading --save
導(dǎo)入方式
es6模塊導(dǎo)入方式
import InfiniteLoading from 'vue-infinite-loading';
export default {
components: {
InfiniteLoading,
},
};
CommonJS 模塊導(dǎo)入方式
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會(huì)注冊(cè)一個(gè)全局變量VueInfiniteLoading,使用時(shí)需要這樣：
...
components: {
VueInfiniteLoading:VueInfiniteLoading.default,
}
...
開始
基礎(chǔ)使用
在本例中，我們將創(chuàng)建一個(gè)基本的無限列表,有如下三個(gè)步驟：
- 在你的模板中，用v-for創(chuàng)建一個(gè)列表
- 將InfiniteLoading組件放在列表的底部；
- 將InfiniteLoading組件的ref屬性設(shè)置為infiniteLoading，因?yàn)橐盟鼇碛|發(fā)事件。
- 為InfiniteLoading組件創(chuàng)建并綁定一個(gè)加載回調(diào)函數(shù)。
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>函數(shù)中，每次我們都push 20 個(gè)數(shù)字到list數(shù)組中。我們使用<strong>setTimeout</strong>來模擬異步請(qǐng)求。最后，不要忘了觸發(fā)一個(gè)<strong>$InfiniteLoading:loaded</strong>事件,它將告訴<strong>InfiniteLoading</strong>組件，數(shù)據(jù)已經(jīng)下載成功。
現(xiàn)在，我們可以根據(jù)上面的代碼，來顯示效果。
<p id="hacker">例子：黑客新聞列表頁面</p>
在這個(gè)例子中，我們將模仿一個(gè)黑客新聞列表頁面，但是會(huì)用<strong>InfiniteLoading</strong>代替<strong>分頁</strong>
在開始這個(gè)例子之前，我們需要準(zhǔn)備以下內(nèi)容：
- 獲取新聞列表的API,在本例中我們使用 HN Search API
- 導(dǎo)入axios插件來請(qǐng)求數(shù)據(jù)
Template
<div class="hacker-news-list">
<div class="hacker-news-header">
<a target="_blank" rel="external nofollow" rel="external nofollow" >
</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>
在模板中，我們?yōu)楹诳托侣劻斜韯?chuàng)建了一個(gè)header 和 一個(gè)list 。在這個(gè)例子中的<strong>InfiniteLoading</strong>組件，與上個(gè)例子中使用方式有些不同。我們基于<strong>slot</strong>自定義了當(dāng)沒有更多數(shù)據(jù)時(shí)的提示內(nèi)容。
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
}
};
在<strong>onInfinite</strong>函數(shù)中，我們請(qǐng)求了一頁的新聞，并且每次將它們推入到list數(shù)組中。如果我們請(qǐng)求了3頁新聞，將觸發(fā) <strong>$InfiniteLoading:complete</strong>事件去告訴<strong>InfiniteLoading</strong>組件，現(xiàn)在已經(jīng)沒有更多數(shù)據(jù)可以加載了。它將顯示我們自定義在模板中的，表示沒有更多數(shù)據(jù)的提示內(nèi)容。
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;
}
<p id="use">與過濾器一塊使用</p>
在上個(gè)例子的基礎(chǔ)上，我們將在頭部創(chuàng)建一個(gè)下拉選擇作為過濾器，當(dāng)我們改變過濾器，列表將會(huì)重新加載。
Template
<div class="hacker-news-list">
<div class="hacker-news-header">
<a target="_blank" rel="external nofollow" rel="external nofollow" >
</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
}
};
在<strong>changeFilter</strong>函數(shù)中，我們清楚了列表并等待DOM更新，然后我們觸發(fā)一個(gè)<strong>$InfiniteLoading:reset</strong>事件，目的是讓<strong> InfiniteLoading </strong>組件回到最初狀態(tài)，它將立刻請(qǐng)求新的數(shù)據(jù)。
Style
在上個(gè)例子基礎(chǔ)上增加樣式
.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;
}
<p id="server">服務(wù)端渲染</p>
服務(wù)端渲染(SSR)是<strong>Vue.js2.0</strong>的新特性，當(dāng)你在你的SSR應(yīng)用中使用這個(gè)組件，會(huì)得到類似這樣的錯(cuò)誤：
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 (...)
因?yàn)?lt;strong>style-loader</strong>不支持在這個(gè)時(shí)候本地導(dǎo)出，詳情點(diǎn)這里,所以我們需要下面的變通方案，為了你的SSR應(yīng)用：
import InfiniteLoading from 'vue-infinite-loading/src/components/Infiniteloading.vue';
代替
import InfiniteLoading from 'vue-infinite-loading';
<strong>npm install less less-loader --save-dev</strong> 如果你還沒有安裝它們。
然后你的SSR應(yīng)用應(yīng)該運(yùn)行良好。如果不是，你可以加入這個(gè)issue去討論。
<p id="properties">屬性<p>
on-infinite
這是一個(gè)回調(diào)函數(shù)，當(dāng)滾動(dòng)到距離滾動(dòng)父元素底部特定距離的時(shí)候，會(huì)被調(diào)用。
通常，在數(shù)據(jù)加載完成后，你應(yīng)該在這個(gè)函數(shù)中發(fā)送<strong>$InfiniteLoading:loaded</strong>事件。
- type Function - reuqired true
distance
這是滾動(dòng)的臨界值。如果到滾動(dòng)父元素的底部距離小于這個(gè)值，那么<strong>on-infinite</strong>回調(diào)函數(shù)就會(huì)被調(diào)用。
- type Number - required false - default 100 - unit pixel
spinner
通過這個(gè)屬性，你可以選擇一個(gè)你最喜愛旋轉(zhuǎn)器作為加載動(dòng)畫。點(diǎn)擊這里可以看到所有可用的旋轉(zhuǎn)器。
- type String - required false - default 'default'
ref
正如你所知，這個(gè)屬性是一個(gè)Vue.js的官方指令，用來獲取子組件的實(shí)例。我們需要用它來得到<strong> InfiniteLoading </strong>組件的實(shí)例來發(fā)送事件。你可以用這種方式來得到實(shí)例：<strong>this.$refs[the value of ref attribute].</strong>
- type String - required true
direction
如果你設(shè)置這個(gè)屬性為top,那么這個(gè)組件將在你滾到頂部的時(shí)候，調(diào)用on-infinite函數(shù)。
<strong>警告：你必須在數(shù)據(jù)加載后，手動(dòng)地將滾動(dòng)父元素的scrollTop設(shè)置為正確的值，否則，該組件會(huì)一次又一次調(diào)用on-infinite函數(shù)。</strong>
- type String - default 'bottom'
<p id="event">事件</p>
<strong>InfiniteLoading </strong>組件將處理一下事件。如果你需要通過組件的實(shí)例來<strong>$emit</strong>,則可以通過<strong>ref</strong>屬性來得到組件實(shí)例。
$InfiniteLoading:loaded
通常，你需要在數(shù)據(jù)加載后發(fā)送這個(gè)事件，<strong> InfiniteLoading</strong>組件將隱藏加載動(dòng)畫，并且準(zhǔn)備下一次觸發(fā)。
$InfiniteLoading:complete
如果<strong>InfiniteLoading</strong>組件就不會(huì)接收<strong>$InfiniteLoading:loaded</strong>，當(dāng)你發(fā)送這個(gè)事件后，它將為用戶顯示一個(gè)沒有結(jié)果的提示。如果<strong>InfiniteLoading</strong>組件接收過<strong>$InfiniteLoading:loaded</strong>，當(dāng)你發(fā)送這個(gè)事件的時(shí)候，它會(huì)為用戶顯示一個(gè)沒有更多內(nèi)容的提示。你可以利用slot來自定義需要顯示的內(nèi)容。
你的<strong>onInfinite</strong>函數(shù)可能像這個(gè)樣子：
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
<strong>InfiniteLoading</strong>組件將會(huì)回到最初的狀態(tài)，并且<strong>on-infinite</strong>函數(shù)將會(huì)立刻被調(diào)用。大部分情況下，如果你把這個(gè)組件同過濾器或制表符一起使用，這個(gè)事件還是有用的。
<p id="slots">插槽</p>
你可以利用<strong>slot</strong>自定義提示的內(nèi)容，當(dāng)然，如果你喜歡的話，也可以使用默認(rèn)內(nèi)容：
<span slot="{{ slot name }}">
{{ Your content }}
</span>
no-results
當(dāng)<strong>InfiniteLoading</strong>組件接收到<strong>$InfiniteLoading:complete </strong>事件并且它沒有接收過<strong>$InfiniteLoading:loaded</strong>事件時(shí)，這個(gè)內(nèi)容會(huì)顯示出來。
- type String - default No results :(
no-more
當(dāng)<strong>InfiniteLoading</strong>組件接收到<strong>$InfiniteLoading:complete </strong>事件并且它已經(jīng)接收過<strong>$InfiniteLoading:loaded</strong>事件時(shí)，這個(gè)內(nèi)容會(huì)出現(xiàn)。
spinner
如果，你不喜歡當(dāng)前旋轉(zhuǎn)器，你可以自定義自己的旋轉(zhuǎn)器作為加載時(shí)的動(dòng)畫。
- type HTML - default default spinner
<p id="spinners">旋轉(zhuǎn)器</p>
你可以用<strong>spinner</strong>屬性，選擇你最喜愛的旋轉(zhuǎn)器作為加載動(dòng)畫:
<infinite-loading spinner="{{ spinner name }}"></infinite-loading>
點(diǎn)擊這里可以查看幾個(gè)可用的旋轉(zhuǎn)器。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于Vite不能使用require問題的解決方法
在vue2中我們通常會(huì)在模板中通過三目運(yùn)算符和require來實(shí)現(xiàn)動(dòng)態(tài)圖片,下面這篇文章主要給大家介紹了關(guān)于Vite不能使用require問題的解決方法,需要的朋友可以參考下2022-10-10
關(guān)于vue.extend和vue.component的區(qū)別淺析
最近工作中遇到了vue.extend,vue.component，但二者之間的區(qū)別與聯(lián)系是什么呢？下面這篇文章主要給大家介紹了關(guān)于vue.extend和vue.component區(qū)別的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-08-08
vue實(shí)現(xiàn)帶小數(shù)點(diǎn)的星星評(píng)分
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶小數(shù)點(diǎn)的星星評(píng)分，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
在vue中動(dòng)態(tài)添加class類進(jìn)行顯示隱藏實(shí)例
今天小編就為大家分享一篇在vue中動(dòng)態(tài)添加class類進(jìn)行顯示隱藏實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了Vue實(shí)現(xiàn)驗(yàn)證碼登錄全過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)的時(shí)候,將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余,為了解決這個(gè)問題我們可以使用mapState輔助函數(shù)幫助我們生成計(jì)算屬性,這篇文章主要給大家介紹了關(guān)于vuex狀態(tài)管理之mapState用法的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue如何使用原生video標(biāo)簽播放視頻問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3中template使用ref無需.value原因解析
vue3的template中使用ref變量無需使用.value,還可以在事件處理器中進(jìn)行賦值操作時(shí),無需使用.value就可以直接修改ref變量的值,這篇文章主要介紹了原來vue3中template使用ref無需.value是因?yàn)檫@個(gè),需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細(xì)介紹了基于VUE選擇上傳圖片并頁面顯示，圖片可以刪除的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
vue3輸入單號(hào)和張數(shù)如何自動(dòng)生成連號(hào)的單號(hào)
最近遇到這樣的需求輸入連號(hào)事件,需要在表格中輸入物流單號(hào),物流號(hào)碼,生成的數(shù)量,名稱,點(diǎn)擊確定自動(dòng)生成固定數(shù)量的連號(hào)物流單號(hào),本文重點(diǎn)介紹vue3輸入單號(hào)和張數(shù),自動(dòng)生成連號(hào)的單號(hào),感興趣的朋友一起看看吧2024-02-02