H5如何做页面下拉刷新和上拉加载

这里以vant为例

结构

 
        
                
                

                
{{item.N?.replace(/[【】[\]]/g, '')}}
                

                  

                    

                      
订单编码:
                      
{{ item.A || '/'}}
                    
                    

                      
提交时间:
                      
{{ item.B || '/'}}
                    
                    

                      
当前处理人:
                      
{{ item.C || '/'}}
                    
                    

                      
归档时间:
                      
{{ item.D || '/'}}
                    
                  
                  

                    
                  
                
              
          
      
    

 

data（）{
    return{
     page:1,
     pageSize:10,
     loading: true,
     isLoading: false,
     finished: false,
     refreshing: false,
   }
} 


//函数
onLoad() {
      // 开始异步请求数据
      this.loading = true;
      // 本次数据更新成功后，将loading设置为false
      this.page+=1
      this.getData()
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.isLoading = false;
      this.onLoad();
    },
getData(){
  this.loading = false;
  获取数据的逻辑

}

饿了么也有对应的组件.