本文虽长，但值得看完。可避免开发中的很多坑
uni-app自带原生导航栏，在pages.json里配置。原生导航的体验更好，渲染新页面时，原生导航栏的渲染无需等待新页面dom加载，可以在新页面进入动画开始时就渲染。
原生导航还可以避免滚动条通顶，并方便的控制原生下拉刷新。通过pages.json的配置，可以简单的、跨端的、高性能的开发业务。
支持通过如下方法取消单独一个页面的原生导航栏。但小程序右上角胶囊按钮仍然去不掉。页面配置navigationStyle为custom：
App因为默认为沉浸式，去除导航栏后，页面顶部会直通到状态栏的区域，可能出现如下需求：
以下为示例：
页面监听代码如下：
exportdefault{data(){return{}},onNavigationBarButtonTap(){console.log("点击了自定义按钮");}}pages.json配置如下：
{"path":"pages/log/log","style":{"navigationBarTitleText":"hello","app-plus":{"titleNView":{"buttons":[{"text":"\ue534","fontSrc":"/static/uni.ttf","fontSize":"22px"}]}}}}buttons的text推荐使用字体图标。如果按钮使用的汉字或英文较长，推荐把字体改小一点，或者调节按钮宽度等值。配置button的背景颜色为透明：background:'rgba(0,0,0,0)'
以上代码在hellouni-app的模板-顶部导航标题栏中有示例。
{"path":"nav-city-dropdown/nav-city-dropdown","style":{"navigationBarTitleText":"导航栏带城市选择","app-plus":{"titleNView":{"buttons":[{"text":"北京市","fontSize":"14","select":true,"width":"auto"}]}}}}以上代码在hellouni-app的模板-顶部导航标题栏中有示例。
原生导航栏还支持透明渐变效果，页面刚载入时没有导航标题，页面内容通顶到状态栏里，页面向下滚动后标题栏渐变出现。
透明渐变的导航栏的button图标有一个默认的灰色背景圈，防止背景图和按钮前景颜色相同导致按钮无法看清。如果要去掉这个灰色背景图，可以配置button的背景颜色为透明：background:'rgba(0,0,0,0)'
titleNView新版配置可以直接配图片，还支持Gif图。但这里提供一个黑科技写法，通过在titleNView里配置tags，可以实现导航栏绘制图片的效果：
nvue其实是weex上补充了uni的api。uni-app支持使用nvue页面，也就是weex原生引擎，绘制顶部的原生导航栏。在hellouni-app的API-界面示例中，有subnvue示例，里面顶部导航栏是渐变色的，这就是subnvue的原生导航栏。
在pages.json的配置如下：
{"path":"subnvue/subnvue","style":{"app-plus":{"titleNView":false,"subNVues":[{"id":"nav","path":"subnvue/subnvue/nav","type":"navigationBar"}]}}}更新：从HBuilderX2.6.3起，titleNView直接支持了背景图、渐变色，不再需要通过subnvue的方式了。而且性能比subnvue更好。
注意：从HBuilderX1.9.10起提供了subnvue，比使用plus.nativeObj.view自定义原生导航栏更加方便。详见上一节。
不管是全局取消原生导航栏，还是在App下某个页面取消原生导航，如果还想自己绘制一些个性化的title，往往会使用view组件。尤其是App的首页，顶部经常有各种特殊设置，此时需要自己使用前端技术来绘制导航。
导航栏应该是由状态栏和标题栏构成，状态栏的高度为var(--status-bar-height)此变量为uni-app框架提供仅在在css生效，标题栏的高度设为88px，整个状态栏的高度应为：calc(var(--status-bar-height)+88px)（upx主要针对宽度，高度无所谓还可以使用px）
.title-contents{height:calc(var(--status-bar-height)+88px);}.status{height:var(--status-bar-height);}.titles{height:88px;}状态栏和标题栏都应固定在页面顶部，需设置position:fixed，标题栏的top应为状态栏的高度
.top-view{width:100%;position:fixed;top:0;}.titles{top:var(--status-bar-height);}绘制的返回箭头需要绑定点击事件，返回上一个页面
取消原生导航栏后，自己使用HTML自定义组件模拟导航栏，会有很多性能体验问题：
有个高频场景是App“首页”的title自定义，如果实现的效果很个性化，那么使用plus.nativeObj.view的方案会过于复杂，由于首页并不存在新页面进入立即渲染的压力，所以App首页如果要大幅定制，推荐使用前端view绘制，而不是使用plus.nativeObj.view。
如果把自定义导航封装成组件，虽然多个页面引入方便，但性能下降，因为这种自定义组件的加载是晚于页面基本元素的，会导致新页面进入动画时无法渲染title。所以导航条这种要求在动画期渲染的东西，尽量不要使用自定义组件方式。
在hellouni-app示例中有各种导航栏的源码。在扩展ui中有前端自定义导航栏。在模板中有各种原生的导航栏。大多数情况复制这些代码就够了。
DCloud即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位