BottomNavbar 底部导航栏

在底部展示一组导航或操作项。

支持平台

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

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

基础用法

<!-- 底部导航 -->
<fui-bottom-navbar :items="navigationItems" @click="handleNavigationClick" />

在页面定义导航项数组和点击方法。

属性

属性	类型	说明	官网默认值
items	Array	导航项数据	[]
height	Number / String	导航栏高度，单位 rpx	100
size	Number / String	字号，单位 rpx	28
fontWeight	Number / String	字重	400
color	String	文字颜色	#333333
left	Number / String	图标与文字间距，单位 rpx	0
background	String	背景色	#FFFFFF
isBorder	Boolean	是否显示顶部边框	true
isDivider	Boolean	是否显示项间分隔线	true
lineColor	String	边框及分隔线颜色	#EEEEEE
isFixed	Boolean	是否固定底部	true
zIndex	Number / String	层级，nvue 不支持	900
safeArea	Boolean	是否适配底部安全区	true

事件

事件	说明	回调参数
click	点击导航项	包含 index 和当前项字段的对象
init	导航栏初始化完成	{ height, windowWidth }，单位 px

nvue 中元素顺序影响层级。

插槽

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