Advertisement

Vant标签栏的上拉加载和下拉刷新功能 + van-tabs + van-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" :t

全部评论 (0)

还没有任何评论哟~