vue---vant List组件 下拉加载

van-list ajax 异步请求

<van-list
      v-model="loading"
      :finished="finished"
      finished-text="暂无更多数据"
      @load="load_more_items"
    >
        <van-cell
          v-for="item in items"
          :key="item"
          :title="item.name"
          :value="item.created_at"
          />
    </van-list>
    
    new Vue({
    el: '#app',

    data: {
        items: [],
        finished: false,
        loading: false,
        offset: 0,
        page: 0,
        limit: 10,
    },

    mounted: function() {
        this.fetch_items();
    },

    methods: {
        load_more_items: function() {
            this.page += 1;
            this.offset = this.limit * this.page;
            this.fetch_items();
        },

        fetch_items: function() {
            var that = this;

            $.ajax({
                url: `/api/get_items?offset=${this.offset}&limit=${this.limit}`,
                type: 'get',
                dataType: 'json',
                success: function(data) {
                    that.loading = false;
                    if (data.data.length) {
                        that.items.push(...data.data);
                    } else {
                        that.finished = true;
                    }
                }
            });
        }
    }
});

• 加载状态结束

  this.loading = false;
    // 数据全部加载完成
    if (this.total.length<10) {
      //判断数据是否已经加载完成,最后一次list 长度小于等于10的时候
      this.finished = true;
      this.finishedText = "加载完毕";
    } else if (this.total == 0 && this.totalAll == 0) {
      //判断有无搜索到数据
      this.finished = true;
      this.finishedText = "没有搜索到符合条件的设备";
    } else {
      //下拉刷新每次增加一个页面请求
      this.page = this.page + 1;
      this.getData();
    }

<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>

• vue之vant组件下拉加载更多
• Vant 实现 上拉加载更多
• Vant List