一個超詳細vue無限滾動vue-infinite-scroll插件的配置及使用詳解

開發中總會遇到這種下拉加載的設計方案，Vue實現下拉加載最佳方案天然是使用vue-infinite-scroll來實現。接下來咱們一塊兒看下它的配置及使用方式。

首先咱們先了解下他的配置參數：

• v-infinite-scroll="loadMore"表示回調函數是loadMore
• infinite-scroll-disabled="busy"表示由變量busy決定是否執行loadMore，false則執行loadMore，true則不執行，注意，busy表示繁忙，繁忙的時候是不執行的。
• infinite-scroll-distance="10"這裏10決定了頁面滾動到離頁尾多少像素的時候觸發回調函數，10是像素值。通常狀況下會在頁尾作一個幾十像素高的「正在加載中...」，這樣的話，能夠把這個div的高度設爲infinite-scroll-distance的值便可。
• infinite-scroll-immediate-check 默認值爲true，該指令表示，應該在綁定後當即檢查busy的值和是否滾動到底。假如你的初始內容高度不夠，不足以填滿可滾動的容器的話，你應設爲true，這樣會當即執行一次loadMore，會幫你填充一些初始內容。
• infinite-scroll-listen-for-event 當事件在Vue實例中發出時，無限滾動將再次檢查。
• infinite-scroll-throttle-delay 檢查busy的值的時間間隔，默認值是200，由於vue-infinite-scroll的基礎原理是，vue-infinite-scroll會循環檢查busy的值，以及是否滾動到底，只有當：busy爲false且滾動到底，回調函數纔會執行

安裝vue-infinite-scroll

npm install vue-infinite-scroll --save

在Vue項目中引入 vue-infinite-scroll

你能夠選擇全局引入：

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

或者在單個組件中使用：

import infiniteScroll from 'vue-infinite-scroll'
export default {
	directives: { infiniteScroll }
}

在實際開發組件中的調用

 

js部分：

 

爲了便於測試能夠使用官網案例進行演示：

<div v-infinite-scroll="loadMore" infinite-scroll-throttle-delay="500" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
 <div v-for="item in data" :key="item.index">{{item.name}}</div>
</div>

data () {
 return {
 count: 0,
 data: [],
 busy: false
 }
 }，
methods: {
 loadMore: function() {
 this.busy = true
 setTimeout(() => {
 for (var i = 0, j = 10; i < j; i++) {
 this.data.push({name: this.count++ })
 }
 console.log(this.data)
 this.busy = false
 }, 1000)
 }
 }

注意：

• 若是要用數據對容器進行填充，那麼必須設置容器高度 也能夠是屏幕高度，否則沒法觸發loadMore事件
• 在進行異步請求以前，須要調用this.busy= true, 數據請求完成後 再設置 this.busy = false(放在axios請求的外面，避免不斷重複加載的現象)