最详细的vue+vant的上拉加载，下拉刷新

 <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list v-model="loading" :finished="finished" finished-text="没有更多数据了哦!" @load="onLoad">
      <!-- item-all   start -->
      <div class="item-all" v-for="(item,index) in tableData" :key="index">
        <div class="item">
          <span class="itemLeft">检查人名称：</span>
          <span class="item-right">{{item.checkUserName}}</span>
        </div>
        <div class="item">
          <span class="itemLeft">行业类型：</span>
          <span class="item-right">{{item.tradeCategory}}</span>
        </div>
        <div class="item">
          <span class="itemLeft">检查对象名称(姓名)：</span>
          <span class="item-right">{{item.checkObjectName}}</span>
        </div>
        <div class="item">
          <span class="itemLeft">检查时间：</span>
          <span class="item-right">{{item.startTime | switchTime}}-{{item.endTime | switchTime}}</span>
        </div>
        <div @click="handleDetail(item.id)" class="handle-button">待处理</div>
      </div>
      <!-- item-all   end -->
    </van-list>
  </van-pull-refresh>

第一步：一进来的时候页面会加载@load = "onLoad"绑定的onLoad函数。

methods:{
//组件滚动到底部触发事件==>初始化会触发一次load事件，用于加载第一屏数据
   onLoad() {
     this.getList(); //调用请求接口数据的方法
   },
 }  
  //调用接口请求数据
   getList() {
     apiPubSearchMyTask({
       pageNum: this.pageNum,
       pageSize: this.pageSize,
       status:'1',
     }).then((res) => {
       this.total = res.data.total;
       if (this.pageNum == 1) {
         this.tableData = res.data.list;
       } else {
         //页数加1再次调用接口赋值数据
         this.tableData = this.tableData.concat(res.data.list);
       }
       if (this.tableData.length < this.total) {
         this.pageNum = this.pageNum + 1;
       } else {
         this.finished = true;
       }
       //如果loading为true,是不会触发@load事件，因为第一次一进来就触发@load事件把loading = true,
       //所以这里要loading= false,这样滚动到底部才能触发@load事件
       this.loading = false;
     }).catch(()=>{
        this.loading = false;
     });

    下拉刷新的方法
   //下拉刷新触发事件
   onRefresh() {
     console.log('下拉刷新')
     this.pageNum = 1
      apiPubSearchMyTask({
       pageNum: this.pageNum,
       pageSize: this.pageSize,
     }).then(res=>{
        this.total = res.data.total;
        this.tableData = res.data.list
        this.refreshing =false
        this.finished = false// 如果数据全部加载完毕之后，下拉刷新需要把finished质为false
       this.$toast('刷新成功')
       // 当此时tableData的数据长度<total,需要+1页数，不然当我在滚动到底部的时候调用接口还
       // 是用pageNum=1第一页去调用接口数据，这样不对，应该是第二页了。
       if(this.tableData.length < this.total){
         this.pageNum = this.pageNum +1 
       }else{
         this.finished = true
       }
     })
     
   },
   },

接口返回的数据

这边额外做个补充:
如何这边涉及到兄弟组件之间传递数据，需要用到

let $bus = new Vue()
$bus.$emit("")     
   
$bus.$on("",()=>{
})