vant 标签栏+上拉加载+下拉刷新demo van-tabs+van-pull-refresh+van-list demo

思路

页面结构
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;

                       
     }
    }
}