一個超詳細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 {
\tdirectives: { infiniteScroll }
}

在實際開發組件中的調用

js部分：

為了便於測試可以使用官網案例進行演示：

 
{{item.name}}



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請求的外面，避免不斷重複加載的現象)