tui-bottom-navigation 底部导航菜单

介绍

Bottom Navigation：支持二级菜单，支持暗黑模式，可设置背景色，字体颜色，字体大小等基本样式。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiBottomNavigation from "@/components/thorui/tui-bottom-navigation/tui-bottom-navigation.vue"
export default {
	components:{
		tuiBottomNavigation
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	App-Nvue
√	√	√	√	√	√	√	升级中

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-bottom-navigation": "/components/thorui/tui-bottom-navigation/tui-bottom-navigation"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基本使用

通过 itemList 属性设置导航菜单，嵌套itemList数据即为二级菜单，传入数据为约定格式不可随意更改。

<!--uni-app-->
<tui-bottom-navigation :itemList="itemList" @click="menu"></tui-bottom-navigation>

<!--微信小程序-->
<tui-bottom-navigation itemList="{{itemList}}" bindclick="menu"></tui-bottom-navigation>

//data 数据

itemList: [{
		text: '往期',
		iconPath: '/static/components/bottom-navigation/icon_menu_gray.png',
		selectedIconPath: '/static/components/bottom-navigation/icon_menu_gray.png',
		color: '#666',
		//1-选中切换，2-跳转、请求、其他操作，3-菜单
		type: 3,
		//自定义参数，类型自定义
		parameter: null,
		//子菜单left值,不传默认50%,当菜单贴近左右两边可用此参数调整
		popupLeft: '',
		itemList: [
			{
				//不建议超过6个字，请自行控制
				text: '全部文章',
				//自定义参数，类型自定义
				parameter: null
			},
			{
				text: 'ThorUI小程序',
				//自定义参数，类型自定义
				parameter: null
			}
		]
	},
	{
		text: '更多',
		iconPath: '/static/components/bottom-navigation/icon_menu_gray.png',
		selectedIconPath: '/static/components/bottom-navigation/icon_menu_gray.png',
		color: '#666',
		//1-选中切换，2-跳转、请求、其他操作，3-菜单
		type: 3,
		//自定义参数，类型自定义
		parameter: null,
		//子菜单left值,不传默认50%,当菜单贴近左右两边可用此参数调整
		popupLeft: '',
		itemList: [
			{
				//不建议超过6个字，请自行控制
				text: '打赏作者',
				//自定义参数，类型自定义
				parameter: null
			},
			{
				text: '联系我们',
				//自定义参数，类型自定义
				parameter: null
			},
			{
				text: 'ThorUI文档',
				//自定义参数，类型自定义
				parameter: null
			}
		]
	}]

无二级菜单

通过 itemList 属性设置导航菜单，没有二级菜单则不需要嵌套itemList数据，传入数据为约定格式不可随意更改。

<!--uni-app-->
<tui-bottom-navigation :current="current" :itemList="itemList" @click="tabbar"></tui-bottom-navigation>

<!--微信小程序-->
<tui-bottom-navigation current="{{current}}" itemList="{{itemList}}"  bindclick="tabbar"></tui-bottom-navigation>

//data 数据

[{
	text: '首页',
	color: '#666',
	//1-选中切换，2-跳转、请求、其他操作，3-菜单
	type: 1
},
{
	text: '组件',
	color: '#666',
	//1-选中切换，2-跳转、请求、其他操作，3-菜单
	type: 1
},
{
	text: '我的',
	color: '#666',
	//1-选中切换，2-跳转、请求、其他操作，3-菜单
	type: 1
}]

# Slots

none

# Props

参数	类型	说明	默认值
current	Number	当前索引	0
itemList	Array	导航栏项集合	[ ]
color	String	字体颜色	#666
selectedColor	String	选中后字体颜色	#5677fc
fontSize	String	字体大小	28rpx
bold	Boolean	选中后字体是否加粗	true
backgroundColor	String	导航条背景颜色	#F8F8F8
splitLineScale	Boolean	item分割线高度是否缩小	true
subMenuColor	String	二级菜单字体颜色	#333
subMenufontSize	String	二级菜单字体大小	28rpx
subMenuBgColor	String	二级菜单背景色深色：#4c4c4c	#fff
subMenuHover	Boolean	二级菜单是否有点击效果	true
isFixed	Boolean	是否固定在底部	true
unlined	Boolean	去除导航栏顶部的线条	false
isDarkMode	Boolean	是否暗黑模式 (true：所有设置颜色失效)	false

itemList 属性 Object参数说明

参数	说明
text	名称，二级菜单text不建议超过6个字
iconPath	图标地址
selectedIconPath	选中后图标地址
color	默认颜色
type	1-选中切换，2-跳转、请求、其他操作，3-菜单
parameter	自定义参数，类型自定义
popupLeft	菜单left值,不传默认50%,当菜单贴近左右两边可用此参数调整
itemList	二级菜单，暂不支持图标，主要参数同一级菜单text

# Events

事件名	说明	回调参数
click	菜单点击事件	菜单信息数据

click事件回调参数说明

{
	menu: 'sub', //main(主菜单),sub(子菜单)
	type: type, // 1-选中切换，2-跳转、请求、其他操作，3-菜单
	index: index, //主菜单索引值
	subIndex: subIndex,//子菜单索引值，无二级菜单则忽略此参数
	parameter: parameter //自定义参数 itemList属性中传入
}