H5如何做页面下拉刷新和上拉加载-Toy模板网

这篇具有很好参考价值的文章主要介绍了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>

处理方法文章来源地址https://www.toymoban.com/news/detail-689971.html

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
      }

}

到了这里，关于H5如何做页面下拉刷新和上拉加载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！