# uni-nav-bar
自定义导航栏组件
本 Component 是 uni ext component，需下载插件：uni-nav-bar
自定义导航栏组件
在页面pages.json中关闭原生导航栏后，即使用"style": {"navigationStyle": "custom"}，可以使用本组件实现自定义导航栏。
同时注意在pages.json中配置页面style增加属性disableScroll:true，即禁止页面滚动。此时只有uni-nav-bar组件的下方才可以滚动。否则页面的回弹bounce效果会把自定义导航栏也拉下来。
本组件自动适配顶部安全区。用padding-top让出顶部状态栏的高度。除去状态栏高度后，本组件的高度为44px。
本组件左右两边默认各让出了6px的边距。也可以在left-class和right-class中自定义边距。
本组件分为left、mid、right 3个区域。
- left区域默认显示一个返回箭头，大小为44*44px。可以通过属性hideDefaultBack来隐藏，也可以传入一个slot name='left'来替代。可以通过left-class来修饰样式。
- mid区域默认显示title属性设置的标题。也可以传入一个slot name='mid'来替代。其默认宽度为屏幕宽度-两边默认边距-left区域默认宽度-right区域默认宽度。可以通过mid-class来修饰样式。
- right区域默认不显示内容，可以传入一个slot name='right'来显示自定义内容。right区域默认width也是44px，可以通过right-class来修饰样式。
支持属性：
- hideDefaultBack: 隐藏返回箭头
- title: 通过属性方便设置标题。如果传入mid slot，则不生效
- navigationBarTextStyle: 返回箭头和属性设置的标题，它们的颜色均由该属性控制，可选 white|black
本组件默认没有背景色，即透明，会透显页面的背景色。开发者可通过组件的class自行设置背景色
# 兼容性
| Web | 微信小程序 | Android | Android(Vapor) | iOS | iOS(Vapor) | HarmonyOS | HarmonyOS(Vapor) |
|---|---|---|---|---|---|---|---|
| 5.07 | 5.07 | 5.07 | x | 5.07 | x | 5.07 | 5.07 |
# 属性
| 名称 | 类型 | 默认值 | 兼容性 | 描述 |
|---|---|---|---|---|
| hideDefaultBack | boolean | false | - | 是否隐藏默认的返回箭头。为 true 时需要通过 left 插槽自定义返回按钮 |
| title | string | "" | - | 导航栏中间显示的标题文字，若使用 mid 插槽则该属性无效 |
| navigationBarTextStyle | string as PropType<"white" | "black" | ""> | "" | - | 导航栏前景色（文字和返回箭头颜色）。非小程序端未传入时会自动读取 pageStyle 的 navigationBarTextStyle |
| leftClass | classString | "" | - | 左侧区域的自定义样式类 |
| midClass | classString | "" | - | 中间区域的自定义样式类 |
| rightClass | classString | "" | - | 右侧区域的自定义样式类 |
# 示例
示例为hello uni-app x alpha分支，与最新HBuilderX Alpha版同步。与最新正式版同步的master分支示例另见
示例
<template>
<uni-nav-bar :navigationBarTextStyle="navigationBarTextStyle"></uni-nav-bar>
<scroll-view style="flex: 1;padding-bottom: var(--uni-safe-area-inset-bottom);" :class="state.isDarkMode ? 'theme-dark' : 'theme-light'">
<!-- 正常使用场景应把uni-nav-bar放在template的根节点，本示例为了演示多种导航栏效果把导航栏组件放到了scroll-view里了 -->
<uni-nav-bar navigationBarTextStyle="black" title="黑色标题"></uni-nav-bar>
<uni-nav-bar navigationBarTextStyle="white" title="青色背景白色标题" style="background-color: cyan;"></uni-nav-bar>
<uni-nav-bar :navigationBarTextStyle="navigationBarTextStyle" title="下边带灰线" style="border-bottom: 0.5px #ccc solid;"></uni-nav-bar>
<uni-nav-bar :navigationBarTextStyle="navigationBarTextStyle" hideDefaultBack title="隐藏左侧返回箭头"></uni-nav-bar>
<uni-nav-bar :navigationBarTextStyle="navigationBarTextStyle" title="标题居左" mid-class="left-title"></uni-nav-bar>
<uni-nav-bar :navigationBarTextStyle="navigationBarTextStyle" title="右边有按钮">
<template #right>
<text class="txt-button" @click="clickButton">⋯</text>
</template>
</uni-nav-bar>
<uni-nav-bar :navigationBarTextStyle="navigationBarTextStyle" title="右边有2个按钮" right-class="two-buttons">
<template #right>
<text class="txt-button" @click="clickButton">+</text>
<text class="txt-button" @click="clickButton">⋯</text>
</template>
</uni-nav-bar>
<uni-nav-bar :navigationBarTextStyle="navigationBarTextStyle" title="左边有按钮">
<template #left>
<text class="txt-button" @click="clickButton">+</text>
</template>
</uni-nav-bar>
<uni-nav-bar :navigationBarTextStyle="navigationBarTextStyle" title="左右各1个按钮">
<template #left>
<text class="txt-button" @click="clickButton">+</text>
</template>
<template #right>
<text class="txt-button" @click="clickButton">⋯</text>
</template>
</uni-nav-bar>
<uni-nav-bar :navigationBarTextStyle="navigationBarTextStyle">
<template #mid>
<text :style="{ color: navigationBarTextStyle }">插槽右箭头可以点</text>
<text style="padding: 3px;font-size: 10px;" class="uni-theme-text" @click="clickButton">▼</text>
</template>
</uni-nav-bar>
<uni-nav-bar :navigationBarTextStyle="navigationBarTextStyle">
<template #left>
<text class="txt-button" @click="clickButton">+</text>
</template>
<template #mid>
<input placeholder="左中右都是插槽，中间是input" style="border: #ccc 0.5px solid;"/>
</template>
<template #right>
<text class="txt-button" @click="clickButton">⋯</text>
</template>
</uni-nav-bar>
</scroll-view>
</template>
<script setup>
import { state } from '@/store/index';
const navigationBarTextStyle = ref('black')
function clickButton() {
uni.showToast({
title: '点击了按钮'
});
}
onShow(() => {
// Android平台如果在onShow前调用API，会设置上一个页面的导航栏颜色，所以放在onShow里设置颜色
// #ifdef APP-ANDROID
if (state.isDarkMode) {
navigationBarTextStyle.value = 'white'
// 本示例中导航栏的背景色和通用背景色不同，前景色无法遵守theme.json的设置，需要单独设颜色
uni.setNavigationBarColor({
"frontColor":"#ffffff",
"backgroundColor":"#000000" //微信规范不可为空
})
} else {
navigationBarTextStyle.value = 'black'
// 本示例中导航栏的背景色和通用背景色不同，前景色无法遵守theme.json的设置，需要单独设颜色
uni.setNavigationBarColor({
"frontColor":"#000000",
"backgroundColor":"#ffffff" //微信规范不可为空
})
}
// #endif
})
watch((): boolean => state.isDarkMode, (newVal: boolean) => {
if (newVal) {
navigationBarTextStyle.value = 'white'
// 本示例中导航栏的背景色和通用背景色不同，前景色无法遵守theme.json的设置，需要单独设颜色
uni.setNavigationBarColor({
"frontColor":"#ffffff",
"backgroundColor":"#000000" //微信规范不可为空
})
} else {
navigationBarTextStyle.value = 'black'
// 本示例中导航栏的背景色和通用背景色不同，前景色无法遵守theme.json的设置，需要单独设颜色
uni.setNavigationBarColor({
"frontColor":"#000000",
"backgroundColor":"#ffffff" //微信规范不可为空
})
}
}
// #ifndef APP-ANDROID
// TODO Android在设置页面导航栏颜色后，后退页面，上一层页面的导航栏也被改了！原因是这个代码执行太早，activity还没创建好
, { immediate: true }
// #endif
)
</script>
<style>
.left-title{
justify-content: flex-start;
}
.two-buttons{
width: 88px;
}
.txt-button{
font-weight: bold;
width: 44px;
height: 44px;
line-height: 44px;
text-align: center;
color: var(--text-color);
}
</style>
