BottomNavbar 底部导航栏

概述

BottomNavbar 底部导航栏，用于提供页面的导航能力。

支持平台

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

温馨提示

• 组件内部使用了 fui-icon（字体图标） 组件，非 easycom 组件模式下需要手动引入组件（打开组件内部注释的引入内容，引入路径按实际调整）。

• 一般来说我们会通过 z-index + position 来进行层级的设置，但是 weex （Nvue）不支持 z-index 设置层级关系，默认越靠后的元素层级越高。

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiBottomNavbar from "@/components/firstui/fui-bottom-navbar/fui-bottom-navbar.vue"
export default {
	components:{
		fuiBottomNavbar
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API（以下示例写于.vue页面中）。

基础使用

通过 items 属性设置导航栏数据，isFixed 属性设置导航栏是否固定在底部。

<fui-bottom-navbar :items="items" :isFixed="false"></fui-bottom-navbar>

data() {
	return {
		//数据格式一
		items: ['历史文章', '面试总结', '欢迎投稿']
	}
}

固定在底部，二级菜单

通过 items 属性设置导航栏数据，left 属性设置导航栏文本与图标之间距离，二级菜单使用 fui-bubble-box 组件实现。

<fui-bottom-navbar :items="options" left="8" @init="init" @click="onClick"></fui-bottom-navbar>
<!--气泡框组件使用请查看具体文档-->
<fui-bubble-box width="200" :size="28" direction="top" :show="show" :triangle="{left:100}" :bottom="height" :left="32" :items="subItems" @click="subClick" @close="onClose"></fui-bubble-box>

data() {
	return {
		//数据格式二
		options: [{
			text: '最新动态',
			name: 'menu',
			size: 24
		}, {
			text: '学习平台'
		}, {
			text: '加入我们'
		}],
		//二级菜单
		subItems: [{
			text: '官方新闻'
		}, {
			text: '线下活动'
		}, {
			text: '商城优惠'
		}],
		height: 100,
		show: false
	}
},
methods: {
	//导航栏初始化事件
	init(e) {
		this.height = Math.ceil(e.height / e.windowWidth * 750)
	},
	//导航栏点击事件
	onClick(e) {
		console.log(e)
		if (e.index === 0) {
			this.show = true
		} else {
			this.fui.toast(e.text)
		}
	},
	//二级菜单点击事件
	subClick(e) {
		console.log(e)
		this.fui.toast(this.subItems[e.index].text)
		this.onClose()
	},
	//关闭二级菜单
	onClose() {
		this.show = false
	}
}

Slots

插槽名称	说明
-	-

Props

属性名	类型	说明	默认值	平台差异说明
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	是否显示item之间分隔线	true	-
lineColor	String	上边框和分隔线颜色	#EEEEEE	-
isFixed	Boolean	导航栏是否固定在底部	true	-
zIndex	Number, String	导航栏层级z-index值	900	Nvue端不支持，默认越靠后的元素层级越高
safeArea V1.5.0+	Boolean	是否适配底部安全区	true	-

//items 数据格式说明

//数据格式一，字符串数组
items: ['历史文章', '面试总结', '欢迎投稿']

//数据格式二，以下为约定属性，其他属性可自行扩展
items: [{
	//item文本
	text: '最新动态',
	//字体图标name值，具体值参考fui-icon组件，传值后优先级大于图片，可选
	name: '',
	//字体图标字体大小，单位rpx，可选
	size: 24,
	//字体图标颜色，可选
	color: '',
	//图片图标src地址，可选
	src: '/static/images/common/logo.png',
	//图片宽度，单位rpx，默认40，可选
	width: 40,
	//图片高度，单位rpx，默认40，可选
	height: 40
}]

Events

温馨提示：@init事件返回的高度包含底部安全距离

事件名	说明	回调参数
@click	点击导航栏item项时触发	{   index : item项索引值   ...this.items[index] }
@init	导航栏初始化事件	{   height:导航栏高度，单位px   windowWidth:屏幕宽度，单位px }

示例预览

示例代码地址

VIP内容代码请查看订单页下载的组件库示例源码。

特别说明

该组件为付费组件，UNI-APP版VIP用户可免费使用 。

开通会员 (opens new window)