更新记录

1.0.0（2026-10-12） 下载此版本

平台兼容性

uni-app(3.8.5)

uni-app x(3.8.5)

其他

vant-tabbar

底部标签栏（Vant 风格，零业务耦合），含子组件 vant-tabbar-item

介绍

底部标签栏用于在不同页面/功能模块间切换，常用于 App 主框架的底部导航。本模块提供容器 vant-tabbar 与子项 vant-tabbar-item，通过 v-model 控制当前选中项，支持自定义图标、文字、红点与角标。样式令牌统一来自宿主 uni.scss 的 $uni-* 体系。

基础用法

<vant-tabbar v-model="active">
  <vant-tabbar-item icon="star" text="首页" />
  <vant-tabbar-item icon="search" text="搜索" />
  <vant-tabbar-item icon="heart" text="消息" dot />
  <vant-tabbar-item icon="success" text="我的" :badge="5" />
</vant-tabbar>

通过 v-model 绑定当前选中项的 name（或索引）。

vant-tabbar Props

vant-tabbar Events

vant-tabbar Slots

vant-tabbar-item Props

vant-tabbar-item Events

vant-tabbar-item Slots

平台兼容性

• H5 ✓
• 小程序 ✓
• App ✓

设计约束

• 仅 Vue3，样式令牌统一来自宿主 uni.scss 的 $uni-*，无硬编码色值。
• 组件零业务耦合：点击仅 emit('click', name) 并委托父级 setActive，不内嵌任何导航或网络请求。
• 颜色策略：父级 active-color / inactive-color 为空时回退令牌（$uni-color-primary / $uni-text-color-grey），传入非空色值时以用户色值内联覆盖。