# 底部导航菜单

Bottom Navigation:支持二级菜单,支持暗黑模式,具体使用参考文档。

# 组件结构

<template>
	<view @touchmove.stop.prevent="stop">
		<view class="tui-bottom-navigation" :class="{ 'tui-navigation-fixed': isFixed, 'tui-remove-splitLine': unlined }">
			<view
				class="tui-navigation-item"
				:class="{ 'tui-item-after_height': splitLineScale, 'tui-last-item': index == itemList.length - 1 }"
				:style="{ backgroundColor: isDarkMode ? '#202020' : backgroundColor }"
				v-for="(item, index) in itemList"
				:key="index"
			>
				<view class="tui-item-inner" @tap="menuClick(index, item.parameter, item.type)">
					<image
						:src="current | getIcon(index, item)"
						class="tui-navigation-img"
						v-if="item.iconPath || (current == index && item.selectedIconPath && item.type == 1)"
					></image>
					<text
						class="tui-navigation-text"
						:style="{
							color: isDarkMode ? '#fff' : current == index && item.type == 1 ? selectedColor : item.color || color,
							fontWeight: current == index && bold && item.type == 1 ? 'bold' : 'normal',
							fontSize: fontSize
						}"
					>
						{{ item.text }}
					</text>
				</view>
				<view
					class="tui-navigation-popup"
					:class="{ 'tui-navigation-popup_show': showMenuIndex == index }"
					:style="{ backgroundColor: isDarkMode ? '#4c4c4c' : subMenuBgColor, left: item.popupLeft || '50%' }"
					v-if="item.itemList"
				>
					<view
						class="tui-popup-cell"
						:class="{ 'tui-first-cell': subIndex === 0, 'tui-last-cell': subIndex === item.itemList.length - 1 }"
						:hover-class="subMenuHover ? (isDarkMode ? 'tui-item-dark_hover' : 'tui-item-hover') : ''"
						:hover-stay-time="150"
						v-for="(subItem, subIndex) in item.itemList || []"
						:key="subIndex"
						@tap="subMenuClick(index, item.type, subIndex, subItem.parameter)"
					>
						<text class="tui-ellipsis" :style="{ color: isDarkMode ? '#fff' : subMenuColor, fontSize: subMenufontSize, lineHeight: subMenufontSize }">
							{{ subItem.text }}
						</text>
					</view>
					<view class="tui-popup-triangle" :style="{ borderTopColor: isDarkMode ? '#4c4c4c' : subMenuBgColor }"></view>
				</view>
			</view>
		</view>
		<view class="tui-navigation-mask" :class="{ 'tui-navigation-mask_show': showMenuIndex != -1 }" @tap="handleClose"></view>
	</view>
</template>

# 组件脚本

<script>
	export default {
		name: 'tuiBottomNavigation',
		
		...省略n行
		
	}
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# 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详细

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

# methods

名称 描述
@click 点击事件

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/bottom-navigation/bottom-navigation

# H5二维码

# 小程序二维码