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 }
  }

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

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