Vant 实现 上拉加载更多

Vant 的 List 组件 默认支持 瀑布流滚动加载。官方的示例是用定时器模拟的数据。我们在项目实战中，肯定是结合ajax请求处理的。那么我们该如何实现这个效果呢？

Vant 的 List组件 使用方法这里就不详细说明了，官方文档已经写的很详细了。直接上项目中的实战代码：

<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="onLoad"
      :offset="10"
    >
      //itemList换成你自己的数据
      <van-cell v-for="item in itemList" :key="item.id">
       
      </van-cell>
    </van-list>

    //没数据时显示
    <div class="no-data" v-if="!this.itemList">
      <img src="../assets/images/null.png" alt="暂无记录" class="img" />
    </div>
  </div>
</template>

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

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

  methods: {
    getroadList() {
      let params = {
        page: this.page, 
        pageSize: this.pageSize 
      };

     //this.$api.pay.schedule(params)是我自己封装的get请求接口
      this.$api.pay.schedule(params).then(res => {
        let rows = res.data.rows; //请求返回当页的列表
        
        this.loading = false;
        this.total = res.data.total; 

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

        // 将新数据与老数据进行合并
        this.itemList = this.itemList.concat(rows);
       
       //如果列表数据条数>=总条数，不再触发滚动加载
        if (this.itemList.length >= this.total) {
          this.finished = true;
        }
      });
    },

    //滚动加载时触发，list组件定义的方法
    onLoad() {
      this.page++;
      this.getroadList();
    }
  }
};
</script>  

 

注意事项：

设置<van-list>组件 :immediate-check="false"

理由：禁止 List 初始化时触发 load 事件。把加载第一屏的事件放在 created() 里面。