> 原生导航的体验更好，渲染新页面时，原生导航栏的渲染无需等待新页面dom加载，可以在新页面进入动画开始时就渲染。

> 更多功能参考此示例：https://ext.dcloud.net.cn/plugin?id=1765

[TOC]

## 原生导航栏的通用配置

> 原生通用配置：即小程序、APP、H5都通用的配置，修改pages.json，page>style(单个页面设置)或者globalStyle(全局设置)中进行navigationBar相关配置

> 参考 https://uniapp.dcloud.io/collocation/pages?id=style

## 5+ APP 导航栏扩展

> 除了上面提到的通用配置以外，还提供了5+ APP(即iOS、Android)的增强自定义配置，修改pages.json中的app-plus>titleNView的相关配置

> 参考文档：https://uniapp.dcloud.io/collocation/pages?id=app-plus

## 去除原生导航栏

> 修改pages.json，page>style(单个页面设置)或者globalStyle(全局设置)中将navigationStyle(默认default)修改为custom

> 被设置为custom的页面，没有了原生导航，则需要开发者使用view自行绘制导航栏

```

"globalStyle": {

"navigationStyle": "custom"

}

```

## 去除原生导航栏后自绘导航栏

> 通过绘制一个占位的view固定放在状态栏

> uni-app提供了一个状态栏高度的css变量，具体参考：https://uniapp.dcloud.io/frame?id=css%E5%8F%98%E9%87%8F

> 推荐使用第三方组件 (当然优先推荐使用原生，性能更好)

> 1. https://ext.dcloud.net.cn/plugin?id=974

> 2. https://ext.dcloud.net.cn/plugin?id=52

~~~

~~~

~~~

.status_bar {

height: var(--status-bar-height);

width: 100%;

background-color: #F8F8F8;

}

.top_view {

height: var(--status-bar-height);

width: 100%;

position: fixed;

background-color: #F8F8F8;

top: 0;

z-index: 999;

}

~~~

## 给原生导航栏添加自定义按钮

> 按钮的点击事件需要在页面监听onNavigationBarButtonTap事件

> 通过修改titleNView的配置实现自定义按钮，titleNView设置有很多，详细api：http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

> 提示：hello uni-app的中 模板 -> 顶部导航标题栏 有示例

> 页面监听代码如下：

~~~

export default {

data() {

return {}

},

onNavigationBarButtonTap() {

console.log("点击了自定义按钮");

}

}

~~~

> pages.json配置如下：

> buttons的text推荐使用字体图标

> 如果按钮使用的汉字或英文较长，推荐把字体改小一点，或者调节按钮宽度等值

> 配置button的背景颜色为透明：background:'rgba(0,0,0,0)'

~~~

{

"path": "pages/log/log",

"style": {

"navigationBarTitleText": "hello",

"app-plus": {

"titleNView": {

"buttons": [{

"text": "\ue534",

"fontSrc": "/static/uni.ttf",

"fontSize": "22px"

}]

}

}

}

}

~~~

### 导航栏带红点和角标

~~~

{

"path" : "nav-dot/nav-dot",

"style" : {

"navigationBarTitleText" : "导航栏带红点和角标",

"app-plus" : {

"titleNView" : {

"buttons" : [

{

"text" : "消息",

"fontSize" : "14",

"redDot" : true

},

{

"text" : "关注",

"fontSize" : "14",

"badgeText" : "12"

}

]

}

}

}

}

~~~

### 导航栏带下拉选择(城市选择)

~~~

{

"path" : "nav-city-dropdown/nav-city-dropdown",

"style" : {

"navigationBarTitleText" : "导航栏带城市选择",

"app-plus" : {

"titleNView" : {

"buttons" : [

{

"text" : "北京市",

"fontSize" : "14",

"select" : true,

"width" : "auto"

}

]

}

}

}

}

~~~

### 导航栏带搜索框

> 因代码较多，此处不列，请参考hello uni-app的 模板 -> 顶部导航标题栏示例。

### 透明渐变样式

> 原生导航栏还支持透明渐变效果，页面刚载入时没有导航标题，页面内容通顶到状态栏里，页面向下滚动后标题栏渐变出现。

~~~

{

"path": "pages/log/log",

"style": {

"navigationBarTitleText": "hello",

"app-plus": {

"titleNView": {

"type": "transparent"

}

}

}

}

~~~

### 导航栏带图片

> titleNView新版配置可以直接配图片，还支持Gif图。但这里提供一个黑科技写法，通过在titleNView里配置tags，可以实现导航栏绘制图片的效果：

> 通过配置 tags 除了可以绘制图片，还可以绘制更多丰富的内容，如：richtext(富文本)、font(文本)、input(输入框)、rect(矩形区域)。详情参考：[titleNView](http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles)、[tags](http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.ViewDrawTagStyles)。

~~~

{

"path" : "nav-image/nav-image",

"style" : {

"app-plus" : {

"titleNView" : {

"titleText" : "",

"tags" : [

{

"tag" : "img",

"src" : "/static/nav.png",

"position" : {

"left" : "auto",

"top" : "auto",

"width" : "110px",

"height" : "26px"

}

}

]

}

}

}

}

~~~

## 通过setStyle方式动态修改原生导航栏样式

> 如果需要js动态修改导航栏，uni有跨端的api可修改标题、背景色、前景色。这部分是app、小程序、h5都支持的，参考 https://uniapp.dcloud.io/api/ui/navigationbar。

> 对于app侧扩展的设置，比如自己添加的buttons，则需使用plus的js api来动态设置。在App端可以通过得到webview对象，通过setStyle方法重新设置，包括修改webview对象的titleNview属性，以达到修改标题栏按钮文字及样式的功能。具体参考：https://ask.dcloud.net.cn/article/35374

参考文档：

> https://uniapp.dcloud.io/collocation/pages?id=style

> https://ask.dcloud.net.cn/article/34921

> 不错的导航栏插件：https://ext.dcloud.net.cn/plugin?id=52