使用Vue開發移動端html5中上拉加載數據解決方案

在移動端的web開發中，由於設備的侷限性，上拉滾動加載可以帶來更好的用戶體驗，一個列表或者waterfall的lasyload都是基於上拉判斷距離後觸發事件進行請求加載數據，如何在Vue項目中實現這個功能呢，我們使用了一款vue direvtive指令性的插件vue-infinite-scroll。

detail link：https://github.com/ElemeFE/vue-infinite-scroll

安裝：

npm install vue-infinite-scroll --save

在mian.js引用即可使用：

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

template：

<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10" infinite-scroll-throttle-delay=“500”>
	<div v-for="(item, iindex) in infoList" :key="index">{{item.name}}</div>
</div>
<div class="loadStatusTips" v-if="busy || infoList&&infoList.length == TotalCount" >{{loadStatusText}}</div>     //加載中或者加載完所有數據

js

 data () {
    return {
      infoList:[],
      PageIndex:0,
      TotalPage:1,
      TotalCount:0,
      busy: false,
      loadStatusText:"沒有更多了"
    }
  },
methods: {
	async getInfoList(){
      let res = await this.$http('xxx',{
        PageIndex:this.PageIndex
      })
      if(condition){
        this.infoList= this.staffList.concat([...ResultList])    //響應的lst
        this.TotalPage = res.Result.TotalPage
        this.busy = false       // 請求完畢後才能再次觸發vue-infinite-scroll
      }
    },

    loadMore: function() {
      this.busy = true
      if (this.PageIndex==this.TotalPage) {      //當請求玩所有的頁數則不再發起請求
        this.loadStatusText = "沒有更多了"
        return
      }
      this.PageIndex = this.PageIndex<this.TotalPage?this.PageIndex += 1:this.PageIndex
      this.getInfoList()
      this.loadStatusText = "正在拼命加載中..."
    }
}  // methods

可選屬性如下：

ps：data中的pageIndex當前頁爲什麼是0，而pageTotal總頁數是1呢，是因爲該插件的infinite-scroll-immediate-check 默認值爲true，所以每次進入頁面會自動觸發loadmore請求一次來填充列表空間, 設爲0是爲了讓第一次請求可以拿導pageindex爲1的內容, 可將其設爲false，在鉤子函數中自己觸發請求也可,
vue-infinite-scroll的原理就是，vue-infinite-scroll會循環檢查infinite-scroll-disabled的值，以及是否滾動到底部，當busy爲false且滾動到底，回調函數loadmore纔會被觸發。