简介

底部导航组件用于在不同页面或功能模块之间进行快速切换。支持纯图标、纯文字或图标+文字的组合展示，集成徽标提醒，并完美适配全面屏底部安全区域。

使用方法

局部引入，在需要引入的页面或组件的 index.json 中配置：

"usingComponents": {
  "fs-tab-bar": "ava-ui/fxui/fs-tab-bar/index"
}

代码演示

基础用法

展示了设计稿中要求的三种模式：纯图标、纯文字、图标+文字。

API

属性

属性	说明	类型	可选值	默认值
list	标签列表数据	Array	-	[]
current	当前激活项的索引	Number	-	0
activeColor	激活态文字/图标颜色	String	-	#ff8000
inactiveColor	未激活态文字/图标颜色	String	-	#545861
fixed	是否固定在底部（开启后自动处理安全区域）	Boolean	-	true
border	是否显示顶部灰色分割线	Boolean	-	true
zIndex	元素层级	Number	-	100

List 项配置说明

属性	说明	类型
text	显示的文字内容	String
icon	未激活时的图标名称	String
activeIcon	激活时的图标名称（不传则复用 icon）	String
dot	是否显示红点徽标	Boolean
badge	显示的数字徽标内容	String/Number

事件

事件名	说明	回调参数
change	点击切换项时触发

打开预览