vant组件list上拉刷新加载的问题

vant组件list的一些问题
在这一次的小程序开发中，使用vant的list列表，刚开始都是在网上找的很多例子参考，但是他们的都会出现很多小问题，还有的会重复加载数据和多次请求接口。经过多次的修改后发现这种方法完美结局以上问题。页面不会多次请求接口，也不会重复数据，更不会无限刷新。数据只有一条的情况下也不会有异常。我看有些码友说数据长度不够会重复加载来填充页面高度，我这样写没有出现这种情况。刚好遇到的小伙伴们可以参考这种方法!我这里是结合tabs做的列表，两个列表数据需要把方法分开，以免数据和参数干扰。

HTML代码部分

<van-tabs>
        <van-tab title=“已上报">
                   <van-pull-refresh v-model="refreshing" :head-height="20" @refresh=“onRefresh">
                   <van-list
                        v-model=“loading”
                       :finished="finished"
                       finished-text=“没有更多了!"
                       :immediate-check="true"
                       :offset="50"
                       @load=“onLoad"
                  >
                  <div  v-for="(item,index) in appearList" :key="index">
                        <div>{{item.name}}</div>
                         <div>{{item.code}}</div>
                 </div>
                       </van-list>
                  </van-pull-refresh>
          </van-tab>
          <van-tab title=“待修改">
                 <van-pull-refresh v-model="isrefreshing" :head-height="20" @refresh=“isonRefresh">
                       <van-list
                                 v-model="isloading"  
                                 :finished="isfinished"
                                 finished-text=“没有更多了!"
                                 :immediate-check="true"
                                 :offset="50"
                                 @load=“isonLoad"
                            >
                                  <div v-for="(item,index) in editList" :key="index">
                                               <div>{{item.name}}<div>
                                  </div>             
                          </van-list>
                       </van-pull-refresh> 
          </van-tab>
          </van-tabs>

JS代码部分

     data(){
        return{
           refreshing:false,
           loading:false,
           finished:false,
           isrefreshing:false,
           isloading:false,
           isfinished:false,
           pageNum:1,
           pageNumber:1,
           pageSize:10,
           appearList:[],
           editList:[]
     }
     } 
     methods:{
         onLoad(){
                  this.getreviewlog()
      },
      isonLoad(){
                   this.getinfoData()
    },
    onRefresh(){
                     this.pageNum=1
                      this.loading=true
                      this.finished=false
                      this.getreviewlog()
    },
    isonRefresh(){
                   this.pageNumber=1
                   this.isloading=true
                   this.isfinished=false
                   this.getinfoData()
  },
  getinfoData(){
             let data={
                       "data":{},
                          "pageNum":this.pageNumber,
                          "pageSize":this.pageSize
             }
        this.isloading=true;
        this.$axios(data).then(()=>{
                       if(res.data.data){
                                if(this.isrefreshing){
                                     this.editList=[],
                                     this.isrefreshing=false
                             }
                             // 每次的数据请求后数据需要合并
                             this.editList=this.editList.concat(res.data.data.list)
                             this.isloading=false
                              // 把当前的页码赋值给变量
                                 this.pageNumber=res.data.data.nextPage;
                                 // 如果是最后一页则停止加载
                                 if(res.data.data.isLastPage){
                                          // 加载结束不再出触发滚动条
                                           this.isfinished=true
                                 }
                         }else{
                                    // 数据如果没有返回直接加载完成
                                        this.isfinished=true
                         }
        }).catch((err)=>{
              // 在数据加载异常的情况下停止加载
                this.isloading=false;
                this.idfinished=true
        })
  },
  getreviewlog(){
           let data={
                     "data":{},
                       "pageNum":this.pageNum,
                         "pageSize":this.pageSize
             }
           this.loading=true;
           this.$axios(data).then((res)=>{
                       if(res.data.data){
                              // 如果是下拉刷新则先清空
                              if(this.refreshing){
                                        this.appearList=[]
                                        this.refreshing=false
                              }
                              this.appearList=[…this.appearList,…res.data.data.list];
                              // 取消loading效果
                                   this.loading=false
                                   this.pageNum=res.data.data.nextPage
                                   // 如果当前是最后一页则停止加载
                                   if(res.data.data.isLastPage){
                                         this.finished=true
                             }
                       }else{
                              // 数据如果没有返回则直接加载结束
                             this.finished=true
                       }   
              }).catch((err)=>{
                     //   数据记载异常的情况下停止加载
                      this.loading=false;
                       this.finished=true
              })
      }
}