van-tabs 自定义

最新推荐文章于 2025-10-10 13:20:44 发布

原创最新推荐文章于 2025-10-10 13:20:44 发布 · 630 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vant #vant4

1. 标签样式修改

css

:deep(.van-tab--card) {
    color: #000;
    border-radius: 192rpx;
    border: none;
    margin-right: 20rpx;
}

:deep(.van-tab--card)：选中 Vant 中卡片风格的标签页
color: #000：设置标签文字颜色为黑色
border-radius: 192rpx：设置标签圆角半径，使标签呈现胶囊形状
border: none：移除标签的边框
margin-right: 20rpx：为每个标签右侧添加间距

2. 激活状态样式

css

:deep(.van-tab--active) {
    background-color: rgba(242, 87, 0, 1) !important;
}

:deep(.van-tab--active)：选中当前激活的标签页
background-color: rgba(242, 87, 0, 1)：设置激活标签的背景色为橙色
!important：强制覆盖组件默认样式

3. 标签导航栏样式

css

:deep(.van-tabs__nav--card) {
    border: none;
}

:deep(.van-tabs__nav--card)：选中卡片风格的标签导航容器
border: none：移除导航容器的边框

4. 标签包裹容器样式

css

:deep(.van-tabs__wrap) {
    height: 100rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);
    border-top: 1rpx solid rgba(0, 0, 0, 0.08);
    margin-bottom: 36rpx;
}

:deep(.van-tabs__wrap)：选中整个标签页的包裹容器
height: 100rpx：设置容器高度
display: flex 和 align-items: center：使用 Flex 布局并垂直居中内容
border-bottom 和 border-top：添加顶部和底部细边框
margin-bottom: 36rpx：为标签容器下方添加间距