vue-infinite-scroll插件可以無限滾動實現(xiàn)加載更多，其作用是是當滾動條滾動到距離底部的指定高度時觸發(fā)某個方法。
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)

使用

復制html到頁面

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

其中…部分可以替換成加載中提示語或加載中圖片。
在data中定義一個busy屬性，對應的是html中infinite-scroll-disabled選項

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

在methods中定義一個loadMore方法，對應的是html中v-infinite-scroll選項，當滾動到距離底部指定位置時觸發(fā)的方法。

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

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

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

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

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

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

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

注意

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

要處理外層標簽和加載中提示的顯示問題

<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、處理外層標簽<div v-infinite-scroll="loadMore" ...>的高度占位問題

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

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

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

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

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

總結

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

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