vant-list上拉加载下拉刷新

vant-list官网示例 ，vant-list各参数释义如下：

效果如图：

<template>
	 <van-list
	   	  v-if="listData.length > 0"
	      v-model="loading"
	      :finished="finished"
    	  :immediate-check="false"
	      finished-text="没有更多了"
	      @load="onLoad"
	      :offset="'50'"
	 >
	    <div class="list-item" v-for="(item, index) in listData" :key="index"></div>
	</van-list>
</template>
<script>
import { List } from "vant";
components: { vanList: List },
data() {
    return {
     loading: true,//加载中
      finished: false,//加载完成
      listData: [],//列表数据
      pageConfig: { //分页数据
        total: 0,
        pageNum: 1,
        pageSize: 20,
        pages: 1,
      },
    };
  },
methods: {
//获取列表数据
 getListData() {
   let parm = {
     pageNumber: this.pageConfig.pageNum,
     pageSize: this.pageConfig.pageSize
   };
   getList.call(this, parm).then((res) => {
     if (res.data == null) {
       this.listData = [];
     } else {
       this.listData = this.listData.concat(res.data);
       this.loading = false;
       if (res.data.length < this.pageConfig.pageSize) {
         this.finished = true;
       } else {
         this.finished = false;
       }
     }
   });
 }
//滚动加载
onLoad() {
   this.loading = true;
   console.log("触底");
   this.pageConfig.pageNum++;
   this.getListData();
},
</script>

注意：

1.列表初始化后会触发一次 load 事件，用于加载第一屏的数据，这个特性可以通过immediate-check属性关闭，即:immediate-check=“false”

2.在从接口拿到的数据是每页的数据，那么渲染出来也就是固定条数，为了实现上拉加载下拉刷新效果，需要concat拼接已拿到数据listData和新获取数据res.data。

3.触底后，显示加载中，页数自增，请求接口。