vue 項目如何實現無限滾動 分頁加載數據

安裝

官網是：https://github.com/ElemeFE/vue-infinite-scroll
 

npm install vue-infinite-scroll --save

 

管官方也推薦了幾種載入方式，但“最vue”的方式肯定是在main.js中加入：

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

實現範例 

官方給的代碼範例是假設你在根組件寫代碼，實際上我們肯定是在子組件裏寫代碼，所以代碼也需要略作修改，下方只列有用的代碼片段：

          <div v-infinite-scroll="loadMore" 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)
    }
  }

 

選項解釋

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的值即可。

vue-infinite-scroll有時候會失效：
|

 

失效解決辦法： 把v-if 換成v-show