Tabbar 标签栏

显示底部标签导航，支持图标、角标与安全区适配。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 底部标签 -->
<fui-tabbar :tabBar="navigationItems" :current="currentTab" @click="handleTabClick" />

页面需声明标签数据、当前索引和点击方法；点击事件返回当前项的索引及数据。

标签项可包含 text、iconPath、selectedIconPath 或 iconName、selectedIconName，以及 badge、dot 等字段；图片路径和字体图标可按项目实际资源配置。

属性

属性	类型	说明	官网默认值
tabBar	Array	标签数据	[]
current	Number / String	当前索引	0
size	Number / String	字号，单位 rpx	24
fontWeight	Number / String	字重	400
iconSize	Number / String	字体图标大小	56
iconUnit	String	图标大小单位：px 或 rpx	rpx
color	String	默认文字和图标颜色	#333333
selectedColor	String	选中文字和图标颜色	#465CFF
background	String	背景色	#FFFFFF
isBorder	Boolean	是否显示顶部边框	true
borderColor	String	边框颜色	#EEEEEE
isFixed	Boolean	是否固定在底部	true
badgeColor	String	角标文字颜色	#FFFFFF
badgeBackground	String	角标背景色	#FF2B2B
zIndex	Number / String	层级，nvue 不支持	980
safeArea	Boolean	固定时是否适配底部安全区	true
fixedHeight	Boolean	init 返回高度是否包含固定的底部安全区高度	false

事件

事件	说明	回调参数
init	标签栏初始化	{ height }
click	点击标签	包含 index 和当前标签字段的对象

非 nvue 平台边框与角标默认色由主题变量控制；nvue 中元素顺序影响层级。

插槽

插槽	说明
—	官网未列出该组件的插槽