【Vue.js】加載更多—vue-infinite-scroll

 

引言

今天用到了一個加載更多的插件，用起來很方便，插件的名字叫做vue-infinite-scroll

我們可以去npmjs.com官網看一下這個vue-infinite-scroll的用法，官網上面寫的已經很簡單易懂的了。

 

安裝

npm install vue-infinite-scroll --save

 

引入

官網介紹了三種引入該插件的方式，分別是Common js方式(require("XXXX")) 、 ES6語法方式(import xxx from xxx)、 還有直接<script src="../node_modules/vue-infinite-scroll/vue-infinite-scroll.js"></script>

我的是vue項目，使用的是ES6語法，當然是用ES6語法方式導入啦。

上面安裝成功之后，在main.js文件下引入該插件，輸入下面的代碼

import VueLazyLoad from 'vue-lazyload'

Vue.use(infiniteScroll)

 

使用

官網上面已經給出了例子，如下：

 

1）首先下面這段官網給出的div的DOM元素放在你<template><div></div></template>的任意地方，都沒問題噠！

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

 

2）因為要通過busy變量來控制infinite-scroll-disabled（無線滾動禁止）屬性，你可能會問，啥子叫無線滾動禁止屬性丫？？？

那么你就要先知道dom里面的infinite-scroll-distance="10"是用來干嘛的？

infinite-scroll-distance這個屬性，叫無線滾動間距，顧名思義，就是規定滑動條與列表外層div的底部的距離，假如infinite-scroll-distance=“10”，就是說，滾動條距離外層div底部的距離如果低於或者等於10，就會無限次數出發loadMore事件！！！！！

那怎么控制它不要無線觸發loadMore事件呢，就是靠infinite-scroll-disabled（無線滾動禁止）屬性來控制，false就是不禁止，true就是禁止的意思。

 

例子

看下面例子：

<script>
  export default {
    data () {
      return {
        page: 1,
        pageSize: 8,
        // 加載更多屬性
        busy: true// 無線滾動禁用
      }
    },

    mounted () {
      this.getGoodsList()
    },
    methods: {
      // 獲取商品列表
      getGoodsList (flag) {
        let param = {
          page: this.page,
          pageSize: this.pageSize,
          sort: this.sortFlag ? 1 : -1
        }
        this.http.get('/goods', {params: param}).then((response) => {
          let res = response.data
          if (res.status === '0') {
            // flag === true，證明是第二次或第二次以上加載數據了
            if (flag) {
              this.goodsList = this.goodsList.concat(res.result.list) // 數據追加
              this.busy = false // 無線滾動禁止 取消，意思就是開啟無限滾動監聽
              if (res.result.list.length === 0) {
                this.busy = true // 無線滾動禁止 啟動
              } else {
                this.busy = false // 無線滾動禁止 取消
              }
            } else { // 第一次加載數據
              this.goodsList = res.result.list
              this.busy = false // 無線滾動禁止 取消
            }
          } else { // 接口調用異常
            this.goodsList = []
          }
        })
      },
      // 加載更多
      loadMore () {
        this.busy = true // 無線滾動禁止
        setTimeout(() => {
          this.page++
          this.getGoodsList(true) // 調用獲取商品的接口
        }, 500)
      }
    }
  }
</script>

 

注意

值得注意的是，為什么要在loadMore里面，再調用接口的時候，加了個延遲函數，並設延遲500ms呢？

我也不明白~~

這500ms的時間差，作用是，當你能夠無線滾動禁止設為 false的時候，當滾動條間距與底部相差10的時候，它會就無限制的調用loadMore函數，並且已500ms的時間差進行無線循環請求。

 

其實不要這個setTimeout函數也是可以的，只要我們合理的控制busy的true與false，就能夠很好地控制請求的次數，實現加載更多的功能，像上面的例子一樣！

 

之前也有講過另外兩種加載更多的實現，有興趣的小伙伴可以跳轉查閱。

 

 

---end---