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

这里以vant为例

结构

 <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
        <van-list
      style="height:100%"
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
                <!-- 内容 -->
                <div class="box3" v-for="(item, index) in orderList" :key="index">
                <div class="item1">{
   
   {item.N?.replace(/[【】[\]]/g, '')}}</div>
                <div class="item2">
                  <div class="text1">
                    <div class="spn">
                      <div >订单编码:</div>
                      <div class="sn">{
   
   { item.A || '/'}}</div>
                    </div>
                    <div class="spn">
                      <div >提交时间:</div>
                      <div class="sn">{
   
   { item.B || '/'}}</div>
                    </div>
                    <div class="spn">
                      <div >当前处理人:</div>
                      <div class="sn">{
   
   { item.C || '/'}}</div>
                    </div>
                    <div class="spn">
                      <div >归档时间:</div>
                      <div class="sn">{
   
   { item.D || '/'}}</div>
                    </div>
                  </div>
                  <div class="text2">
                    <img class="spn1" :src="item.E" alt />
                  </div>
                </div>
              
          </div>
      </van-list>
    </van-pull-refresh>

处理方法

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.finished = true
......获取数据的请求
   if(arr.length/obj.length){ //有没有返回数据
      this.orderList.push(...res.data)
      this.loading = false;
      }else{
        this.finished = true
      }

}