使用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才会被触发。