全局取消原生导航栏
在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
以下为示例:
复制代码<!-- #ifdef APP-PLUS --><!-- #endif -->
复制代码.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; }