uniapp取消导航栏

全局取消原生导航栏

在pages.json的globalStyle里，有个navigationStyle设置，默认是default，即带有原生导航栏。

也可以设置为custom。

在设为custom后，所有页面都没有原生导航。

但在微信小程序里，右上角始终都有一个胶囊按钮。

很多微信小游戏界面上也没原生导航栏，但有胶囊按钮。

一般App里不会使用这个参数配置。

在App里，可以个别页面单独设置不使用原生导航，具体见下。

微信小程序单独去除原生导航栏

自微信客户端 7.0.0 起，微信小程序支持取消单独一个页面的原生导航栏，只保留右上角胶囊按钮，页面配置 navigationStyle 为 custom：

复制代码{"path":"pages/log/log","style": {"navigationStyle":"custom"}  }

原生导航栏在App侧的扩展

微信小程序的设计里，没有给原生导航提供太多自定义能力。在开发App时是不够用的。

pages.json里，每个page下面的style下面还有一个子扩展节点：app-plus。

这个节点定义了在5+App环境下，也即iOS、Android环境下，增强的配置。

其中有一个子节点titleNView，这个是5+规范里webview页面的原生导航窗体规范。

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

App单独去除原生导航栏

复制代码{"path":"pages/log/log","style": {"navigationBarTitleText":"hello","app-plus": {"titleNView":false}      }  }

在App去除原生导航栏后，小程序端侧仍保有原生导航栏。

App去除导航栏后改变状态栏样式

App因为默认为沉浸式，去除导航栏后，页面顶部会直通到状态栏的区域，可能出现如下需求：

改变状态栏文字颜色：设置该页面的 navigationBarTextStyle 属性，可取值为 black/white。

改变状态栏背景颜色：通过绘制一个占位的view固定放在状态栏位置，设置此view的背景颜色，即可达到想要的效果，uni-app提供了一个状态栏高度的css变量，具体参考：http://uniapp.dcloud.io/frame?id=css%E5%8F%98%E9%87%8F

以下为示例：

复制代码

复制代码.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;  }