vant 上拉加载更多

<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="onLoad"
      :offset="10"
    >

      <ul v-if="records.length>0">
          <li v-for="(item,index) in records" :key='index'>

          </li>
      </ul>

    </van-list>
  </div>
</template>

<script>
export default {
  created() {
    //创建组件时，加载第1页数据
    this.getLists();
  },

  data() {
    return {
      loading: false,
      finished: false,
      page: 1,//请求第几页
      limit: 10,//每页请求的数量
      total: 0,//总共的数据条数
      records: []
    }
  },

  methods: {
    getLists() {
      let data= {
        page:this.page,
        limit:this.limit
       };

       _getReportsList(data).then((res)=>{
         if(res.code==200){
            let rows = res.data.records; //请求返回当页的列表
            this.loading = false;
            this.total = res.data.total; 

            if (rows == null || rows.length === 0) {
               // 加载结束
               this.finished = true;
               return;
            }

            // 将新数据与老数据进行合并
            this.records= this.records.concat(rows);   

            //如果列表数据条数>=总条数，不再触发滚动加载
            if (this.records.length >= this.total) { 
               this.finished = true;
            }
         }
       });
    },

    //滚动加载时触发
    onLoad() {
      this.page++;
      this.getLists();
    }
  }
};
</script>