# 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属性中传入
}

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码