vant 标签栏+上拉加载+下拉刷新demo van-tabs+van-pull-refresh+van-list demovan-pull-refresh与van-list同时使用触发两次下拉，出现

思路
页面结构
van-tabs在最上面
van-pull-refresh在van-tabs下面
van-list在van-pull-refresh里面

css关键
给van-pull-refresh设置高度为calc(100% - 44px)， 其中44px是van-tabs的高度，
同时给van-pull-refresh设置
overflow: hidden;
overflow-y: scroll;
这样就能滚动起来加载更多

效果展示

以下是正文
html

<div class="AlarmList">
<van-tabs v-model="active" color="RGBA(4, 131, 247, 1)" title-active-color="#000"
    @change="onRefresh">
    <van-tab v-for="(item,index) in tabList" :key="index" :title="item.title" :name="item.name">
    </van-tab>
 </van-tabs>

<van-pull-refresh :style="{height:'calc(100% - 44px)'}" v-model="isRefresh"
    @refresh="onRefresh" ref="pullRefresh" immediate-check="false">
    <van-empty v-if="dataList.length == 0" description="暂无数据" />
    <van-list ref="list" class="list" v-model="loadingMore" :finished="finished" finished-text="没有更多了"
        @load="onLoadMore">
        <div class="list_item" v-for="(item,index) in dataList" :key="index">
div{{index}}
        </div>
    </van-list>
</van-pull-refresh>
</div>

data定义

tabList: [
    {
        title: "全部",
        name: "1"
    },
    {
        title: "人工",
        name: '2'
    },
    {
        title: "系统",
        name: '3'
    },
],

active: '1',
total: 0,
pageNum: 1,
pageSize: 10,
//上拉加载下拉刷新
loadingMore: true, //加载更多是否显示加载中
finished: false, //加载是否已经没有更多数据
isRefresh: false, //是否下拉刷新
dataList: [],

js

//加载页面
initPage() {
    this.getList();
},
//刷新
onRefresh() {
    this.dataList = [];
    this.loadingMore = true;
    this.finished = false;
    this.isRefresh = false;
    this.pageNum = 1;
    this.getList();
},
//加载更多
onLoadMore() {
    this.pageNum++;
    setTimeout(() => {
        this.getList();
    }, 200);
},
// 获取列表
getList() {
    setTimeout(() => {
        let list = []
        for (let index = 0; index < 5; index++) {
            let obj = { name:"测试",id:index}
            list.push(obj)
        }
        // 加载状态结束
        this.loadingMore = false;
        this.isRefresh = false;
        if (this.dataList.length > 10) {
            //没有更多了
            this.finished = true;
        }
        //数据追加到列表
        this.dataList = this.dataList.concat(list);
    }, 1000);
},

css

.AlarmList{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    position: relative;
    
    /deep/ .van-tabs {
        // height: 100%;
    
        .van-tabs__content {
          height: calc(100% - 44px);
        }
    
        .van-tab__pane {
          height: 100%;
        }
    }
    .van-pull-refresh {
        overflow: hidden;
        overflow-y: scroll;
        .list_item {
            width: calc(100% - 0.6rem);
            display: flex;
            align-items: center;
            margin: 0.3rem;
            box-sizing: border-box;
            background-color: #fff;
            border-radius: 4px;
            flex-direction: column;
            height: 4rem;

                       
     }
    }
}

原文链接：https://blog.csdn.net/weixin_45753961/article/details/125197047

项目场景：

提示：下拉刷新和上拉加载更多同时使用

问题描述

提示：下拉刷新的时候出现两个加载中进度条

原因分析：

提示：下拉刷新的时候触发了上拉加载，所以执行了一次下拉刷新和一次上拉加载更多

解决方案：

提示：下拉刷新时将finished 设置为true,获取数据后判断数据长度，再对finished 进行赋值

<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
  <van-list
    v-model="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <van-cell v-for="item in list" :key="item" :title="item" />
  </van-list>
</van-pull-refresh>

async getList() {
      this.loading = true
      const param = {
        ...this.queryList,
        ...this.searchParams
      }
      const result = await getProductOrderList(param)
      this.isLoading = false
      this.loading = false
      this.refreshing = false
      const { code, data = {}, message } = result.data || {}

      if (code === '200') {
        if (this.queryList.current > 1) {
          this.worlOrderList = this.worlOrderList.concat(data.records)
        } else {
          this.worlOrderList = data.records
        }

        this.total = data.total
        if (this.total <= this.worlOrderList.length) {
          this.finished = true
        }else{
          this.finished = false
        }
      } else {
        Toast.fail(message || '系统繁忙')
      }
    },
    // 下拉刷新
    onRefresh() {
      // 清空列表数据
      this.finished = true
      this.worlOrderList = []
      this.queryList.current = 1
      this.getList()
    },
    // 加载更多
    onLoad() {
      this.queryList.current += 1
      this.getList()
    },

 原文：van-pull-refresh与van-list同时使用触发两次下拉，出现两个加载中进度条_van-pull-refresh van-list_Julia_0502的博客-CSDN博客