原創(chuàng)聲明
本文系作者辛苦碼字所得，歡迎分享和轉(zhuǎn)載，但請(qǐng)?jiān)诿黠@位置注明作者的如下信息：
筆名：來(lái)碗雞蛋面
簡(jiǎn)書(shū)主頁(yè)：http://www.itdecent.cn/u/4876275b5a73
郵箱：job_tom@foxmail.com
CSDN ID：tom_wong666
安裝：
npm i vue-infinite-scroll -D
引用：
main.js中通過(guò)如下方式注冊(cè)全局引用
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
頁(yè)面中使用：
<div
v-infinite-scroll="loadMore"
infinite-scroll-disabled="switchForMore"
infinite-scroll-distance="10">
vue-infinite-scroll示例
</div>
說(shuō)明：
首先：
v-infinite-scroll="loadMore" 中的loadMore事件綁定處理函數(shù)，在達(dá)到條件(滾動(dòng)到一定像素)時(shí)觸發(fā)此函數(shù)。
infinite-scroll-disabled="switchForMore" 中的switchForMore===true阻止觸發(fā)loadMore，反之不阻止；
| 選項(xiàng) | 描述 |
|---|---|
| infinite-scroll-disabled | 如果該屬性的值為true，則將禁用無(wú)限滾動(dòng)。 |
| infinite-scroll-distance | 數(shù)字(默認(rèn)值= 0)——在執(zhí)行v -infinite- scroll方法之前，元素底部和viewport底部之間的最小距離。 |
| infinite-scroll-immediate-check | 布爾值(默認(rèn)值= true)表示該指令應(yīng)該在綁定后立即檢查。如果可能，內(nèi)容不夠高，不足以填滿可滾動(dòng)的容器。 |
| infinite-scroll-listen-for-event | 當(dāng)事件在Vue實(shí)例中發(fā)出時(shí)，無(wú)限滾動(dòng)將再次檢查。 |
| infinite-scroll-throttle-delay | 下次檢查和這次檢查之間的間隔(默認(rèn)值= 200) |
最后，我們寫(xiě)個(gè)函數(shù)驗(yàn)證一下：
methods:{
loadMore(){
alert('觸發(fā)loadMore，請(qǐng)求下一頁(yè)的信息');
}
}
