vue-infinite-scroll插件可以無限滾動(dòng)實(shí)現(xiàn)加載更多，其作用是是當(dāng)滾動(dòng)條滾動(dòng)到距離底部的指定高度時(shí)觸發(fā)某個(gè)方法。
https://github.com/ElemeFE/vue-infinite-scroll/
https://www.npmjs.com/package/vue-infinite-scroll

安裝

cnpm i vue-infinite-scroll -S

vue引用

import infiniteScroll from 'vue-infinite-scroll' Vue.use(infiniteScroll)

使用

復(fù)制html到頁面

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">... </div>

其中…部分可以替換成加載中提示語或加載中圖片。
在data中定義一個(gè)busy屬性，對(duì)應(yīng)的是html中infinite-scroll-disabled選項(xiàng)

data () {busy: false //是否正在加載過程中}

在methods中定義一個(gè)loadMore方法，對(duì)應(yīng)的是html中v-infinite-scroll選項(xiàng)，當(dāng)滾動(dòng)到距離底部指定位置時(shí)觸發(fā)的方法。

methods: {loadMore: function() {this.busy = true;//官方示例中延遲了1秒，防止?jié)L動(dòng)條滾動(dòng)時(shí)的頻繁請(qǐng)求數(shù)據(jù)setTimeout(() => {//這里請(qǐng)求接口去拿數(shù)據(jù)，實(shí)際應(yīng)該是調(diào)用一個(gè)請(qǐng)求數(shù)據(jù)的方法this.busy = false;}, 1000);}}

html中可設(shè)置的選項(xiàng)：
- v-infinite-scroll
指定觸發(fā)的方法

• infinite-scroll-distance
  指定滾動(dòng)條距離底部多高時(shí)觸發(fā)v-infinite-scroll指向的方法

• infinite-scroll-disabled
  等于true時(shí)代表正在執(zhí)行加載，這時(shí)禁用滾動(dòng)觸發(fā)。

• infinite-scroll-immediate-check
  布爾值(默認(rèn)值= true)。指令在綁定后立即檢查，是否內(nèi)容高度不足以填充頁面容器。

• infinite-scroll-listen-for-event
  當(dāng)vue實(shí)例觸發(fā)事件時(shí)立即再次檢查

• infinite-scroll-throttle-delay
  兩次檢查之間的時(shí)間間隔(默認(rèn)值= 200)

注意

busy為true的時(shí)候代表正在執(zhí)行加載，這時(shí)候滾動(dòng)不會(huì)觸發(fā)方法，但并不會(huì)隱藏標(biāo)簽中的內(nèi)容，這個(gè)地方需要自己做處理。

要處理外層標(biāo)簽和加載中提示的顯示問題

<div :class="loadMoreHide ? 'load-more-hide' : 'load-more-normal'" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10"><span v-show="loadingShow">加載中</span></div>

1、處理外層標(biāo)簽<div v-infinite-scroll="loadMore" ...>的高度占位問題

.load-more-normal {text-align: center;height: 60px;line-height: 60px;}.load-more-hide {height: 0;}

定義一個(gè)loadMoreHide屬性，當(dāng)還有數(shù)據(jù)的時(shí)候，當(dāng)還有下一頁的時(shí)候用load-more-normal，沒有下一頁了就設(shè)為load-more-hide

if (this.pageNo >= totalPage) {this.busy = true //已經(jīng)是最后一頁了，不需要再觸發(fā)滾動(dòng)加載了this.loadMoreHide = true //已經(jīng)是最后一頁了，不需要高度了 } else {this.busy = falsethis.loadMoreHide = false }

2、處理加載中提示
定義一個(gè)loadingShow屬性，當(dāng)加載方法執(zhí)行前設(shè)置為true，加載完畢即設(shè)置為false。

loadMore () {this.pageNo++this.busy = truethis.loadingShow = truesetTimeout(() => {this.getAjaxData(true)this.loadingShow = false}, 1000)}

總結(jié)

以上是生活随笔為你收集整理的vue滚动加载插件vue-infinite-scroll的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。