簡(jiǎn)介
創(chuàng)新互聯(lián)建站是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專(zhuān)業(yè)的做網(wǎng)站、網(wǎng)站設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十年品質(zhì)，值得信賴！
這是一個(gè)使用在Vue.js中的無(wú)限滾動(dòng)插件，它可以幫助你快速創(chuàng)建一個(gè)無(wú)限滾動(dòng)列表。
特點(diǎn)
安裝
注意：vue-infinite-loading2.0只能在Vue.js2.0中使用。如果你想在Vue.js1.0中使用，請(qǐng)安裝vue-infinite-loading1.3版本
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,
},
};
其他方式
vue-infinite-loading.js會(huì)注冊(cè)一個(gè)全局變量VueInfiniteLoading,使用時(shí)需要這樣：
...
components: {
VueInfiniteLoading:VueInfiniteLoading.default,
}
...
開(kāi)始
基礎(chǔ)使用
在本例中，我們將創(chuàng)建一個(gè)基本的無(wú)限列表,有如下三個(gè)步驟：
Template
Line:
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函數(shù)中，每次我們都push 20 個(gè)數(shù)字到list數(shù)組中。我們使用setTimeout來(lái)模擬異步請(qǐng)求。最后，不要忘了觸發(fā)一個(gè)$InfiniteLoading:loaded事件,它將告訴InfiniteLoading組件，數(shù)據(jù)已經(jīng)下載成功。
現(xiàn)在，我們可以根據(jù)上面的代碼，來(lái)顯示效果。
例子：黑客新聞列表頁(yè)面
在這個(gè)例子中，我們將模仿一個(gè)黑客新聞列表頁(yè)面，但是會(huì)用InfiniteLoading代替分頁(yè)
在開(kāi)始這個(gè)例子之前，我們需要準(zhǔn)備以下內(nèi)容：
Template
在模板中，我們?yōu)楹诳托侣劻斜韯?chuàng)建了一個(gè)header 和 一個(gè)list 。在這個(gè)例子中的InfiniteLoading組件，與上個(gè)例子中使用方式有些不同。我們基于slot自定義了當(dāng)沒(méi)有更多數(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
}
};
在onInfinite函數(shù)中，我們請(qǐng)求了一頁(yè)的新聞，并且每次將它們推入到list數(shù)組中。如果我們請(qǐng)求了3頁(yè)新聞，將觸發(fā) $InfiniteLoading:complete事件去告訴InfiniteLoading組件，現(xiàn)在已經(jīng)沒(méi)有更多數(shù)據(jù)可以加載了。它將顯示我們自定義在模板中的，表示沒(méi)有更多數(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;
}
與過(guò)濾器一塊使用
在上個(gè)例子的基礎(chǔ)上，我們將在頭部創(chuàng)建一個(gè)下拉選擇作為過(guò)濾器，當(dāng)我們改變過(guò)濾器，列表將會(huì)重新加載。
Template
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函數(shù)中，我們清楚了列表并等待DOM更新，然后我們觸發(fā)一個(gè)$InfiniteLoading:reset事件，目的是讓 InfiniteLoading 組件回到最初狀態(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;
}
服務(wù)端渲染
服務(wù)端渲染(SSR)是Vue.js2.0的新特性，當(dāng)你在你的SSR應(yīng)用中使用這個(gè)組件，會(huì)得到類(lèi)似這樣的錯(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)?strong>style-loader不支持在這個(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';
npm install less less-loader --save-dev 如果你還沒(méi)有安裝它們。
然后你的SSR應(yīng)用應(yīng)該運(yùn)行良好。如果不是，你可以加入這個(gè)issue去討論。
屬性
on-infinite
這是一個(gè)回調(diào)函數(shù)，當(dāng)滾動(dòng)到距離滾動(dòng)父元素底部特定距離的時(shí)候，會(huì)被調(diào)用。
通常，在數(shù)據(jù)加載完成后，你應(yīng)該在這個(gè)函數(shù)中發(fā)送$InfiniteLoading:loaded事件。
- type Function - reuqired true
distance
這是滾動(dòng)的臨界值。如果到滾動(dòng)父元素的底部距離小于這個(gè)值，那么on-infinite回調(diào)函數(shù)就會(huì)被調(diào)用。
- type Number - required false - default 100 - unit pixel
spinner
通過(guò)這個(gè)屬性，你可以選擇一個(gè)你最喜愛(ài)旋轉(zhuǎn)器作為加載動(dòng)畫(huà)。點(diǎn)擊這里可以看到所有可用的旋轉(zhuǎn)器。
- type String - required false - default 'default'
ref
正如你所知，這個(gè)屬性是一個(gè)Vue.js的官方指令，用來(lái)獲取子組件的實(shí)例。我們需要用它來(lái)得到 InfiniteLoading 組件的實(shí)例來(lái)發(fā)送事件。你可以用這種方式來(lái)得到實(shí)例：this.$refs[the value of ref attribute].
- type String - required true
direction
如果你設(shè)置這個(gè)屬性為top,那么這個(gè)組件將在你滾到頂部的時(shí)候，調(diào)用on-infinite函數(shù)。
警告：你必須在數(shù)據(jù)加載后，手動(dòng)地將滾動(dòng)父元素的scrollTop設(shè)置為正確的值，否則，該組件會(huì)一次又一次調(diào)用on-infinite函數(shù)。
- type String - default 'bottom'
事件
InfiniteLoading 組件將處理一下事件。如果你需要通過(guò)組件的實(shí)例來(lái)$emit,則可以通過(guò)ref屬性來(lái)得到組件實(shí)例。
$InfiniteLoading:loaded
通常，你需要在數(shù)據(jù)加載后發(fā)送這個(gè)事件， InfiniteLoading組件將隱藏加載動(dòng)畫(huà)，并且準(zhǔn)備下一次觸發(fā)。
$InfiniteLoading:complete
如果InfiniteLoading組件就不會(huì)接收$InfiniteLoading:loaded，當(dāng)你發(fā)送這個(gè)事件后，它將為用戶顯示一個(gè)沒(méi)有結(jié)果的提示。如果InfiniteLoading組件接收過(guò)$InfiniteLoading:loaded，當(dāng)你發(fā)送這個(gè)事件的時(shí)候，它會(huì)為用戶顯示一個(gè)沒(méi)有更多內(nèi)容的提示。你可以利用slot來(lái)自定義需要顯示的內(nèi)容。
你的onInfinite函數(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
InfiniteLoading組件將會(huì)回到最初的狀態(tài)，并且on-infinite函數(shù)將會(huì)立刻被調(diào)用。大部分情況下，如果你把這個(gè)組件同過(guò)濾器或制表符一起使用，這個(gè)事件還是有用的。
插槽
你可以利用slot自定義提示的內(nèi)容，當(dāng)然，如果你喜歡的話，也可以使用默認(rèn)內(nèi)容：
{{ Your content }}
no-results
當(dāng)InfiniteLoading組件接收到$InfiniteLoading:complete 事件并且它沒(méi)有接收過(guò)$InfiniteLoading:loaded事件時(shí)，這個(gè)內(nèi)容會(huì)顯示出來(lái)。
- type String - default No results :(
no-more
當(dāng)InfiniteLoading組件接收到$InfiniteLoading:complete 事件并且它已經(jīng)接收過(guò)$InfiniteLoading:loaded事件時(shí)，這個(gè)內(nèi)容會(huì)出現(xiàn)。
spinner
如果，你不喜歡當(dāng)前旋轉(zhuǎn)器，你可以自定義自己的旋轉(zhuǎn)器作為加載時(shí)的動(dòng)畫(huà)。
- type HTML - default default spinner
旋轉(zhuǎn)器
你可以用spinner屬性，選擇你最喜愛(ài)的旋轉(zhuǎn)器作為加載動(dòng)畫(huà):
點(diǎn)擊這里可以查看幾個(gè)可用的旋轉(zhuǎn)器。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
