前端滚动分页加载：vue-infinite-scroll

一、展示loading…的div块

 <div v-infinite-scroll="loadMore" v-show="loading" infinite-scroll-disabled="busy" infinite-scroll-distance="30" style="text-align:center;margin:30px">
      LOADING.....
    </div>

二、data

      busy: true ,
      loading: true,
      tableData: [],
      current: 1,  //当前页
      size: 4,  //需要展示的每页条数

三、分页加载

loadMore() {  //绑定在v-infinite-scrol上的
      this.busy = true
      setTimeout(() => {
        this.current++
        this.getContractListFunc(true)  获取数据的接口，第四步
      }, 500);
    },

四、获取tabledata的接口

 getContractListFunc(e) {
      const prarms = {
        "current": this.current,
        "size": this.size
      }
      getContractList(prarms).then(res => {
        console.log('列表',res)
        if (e) {  //为true则分页
	          this.taskList = this.taskList.concat(res.data.list)
	          if (res.data.list.length == 0) {   //如果加载完毕
	            this.busy = true   //停止加载
	            this.loading = false
	          } else {
	            this.busy = false
	          }
        } else {
          this.taskList = res.data.list   直接进入页面时，根据size数量 加载的第一条
          this.busy = false
        }
      }).catch(err => {
        console.log(err);
      })
    },

完成✅～