uni

2023-08-26 03:06| 来源: 网络整理| 查看: 265

uni-app导航栏和状态栏配置(时间,电池状态,信号) 1. 导航栏原生导航优点 ① 原生导航的体验更好，渲染新页面时，原生导航栏的渲染无需等待新页面dom加载，可以在新页面进入动画开始时就渲染。 ② 原生导航还可以避免滚动条通顶，并方便的控制原生下拉刷新。通过pages.json的配置，可以简单的、跨端的、高性能的开发业务。原生导航缺点：原生导航栏的扩展能力有限的。尤其是微信下，没有提供太多导航栏的配置。 1.1 原生导航栏—通用配置

uni-app 自带原生导航栏，在pages.json里配置。参考官网uni-app导航栏开发指南。

(1) 全局导航栏样式设置：在pages.json的globalStyle里进行各个参数配置

"globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "Hello uniapp", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8", "backgroundColorTop": "#F4F5F6", "backgroundColorBottom": "#F4F5F6", "mp-alipay": { "titleBarColor": "#FFFFFF" } },

(2) 单页面导航栏样式设置：在每个page下面的style配置中添加navigationBar**节点来配置各个参数（通用配置，小程序、app、h5均生效）。参考style设置每个页面的状态栏、导航条、标题、窗口背景色等

{ "path": "pages/index/index", "style": { "navigationBarTitleText": "主页", } },

备注：单页面style中配置项会覆盖 globalStyle 中相同的配置项。

1.2 全局取消原生导航栏

备注：一般App里不会使用这个参数配置，建议个别页面单独设置不使用原生导航。

方法：在pages.json的globalStyle里有个navigationStyle设置，默认是default，即带有原生导航栏；**将navigationStyle设为custom**后，所有页面都没有原生导航。

"globalStyle": { "navigationStyle": "custom", },

注意：但在微信小程序里，右上角始终都有一个胶囊按钮。很多微信小游戏界面上也没原生导航栏，但有胶囊按钮。

1.3 单页面去除原生导航栏

(1) 方法1：自微信客户端 7.0.0 起、App端HBuilderX 2.0.3起，可采用**将navigationStyle 设为 custom** 的方法去除单个页面的原生导航栏（但小程序右上角胶囊按钮仍然去不掉）。

{ "path" : "pages/index/index", "style" : { "navigationStyle":"custom" } }

(2) 方法2：除了上述方法，也可在app-plus节点下**设置titleView为false**的方法来去除系统原生导航（在App去除原生导航栏后，小程序端侧仍保有原生导航栏）。

原生导航栏在App侧的扩展

微信小程序的设计里，没有给原生导航提供太多自定义能力，在开发App时是不够用的。在App下，每个page下面的style下面还有一个子扩展节点：app-plus（这个节点定义了在5+App环境下，也即iOS、Android环境下，增强的配置）。app-plus下可以设置titleNView等更多参数，可以得到比微信小程序更丰富的扩展性。另外，开发者也可以在必要时取消原生导航栏，使用view自行绘制导航栏。 { "path": "pages/index/index", "style": { "navigationBarTitleText": "主页", // "navigationStyle":"custom", "app-plus":{ "titleView":false //不启用系统导航 } } }

问题：HBuilderX创建的应用默认使用**沉浸式状态栏样式，去除导航栏后，页面顶部会直通到状态栏的区域**。

1.4 解决去除导航栏后，页面顶部直通状态栏区域的问题。

(1) 最简单的解决方式就是配置mainfest.json来关闭沉浸式。即通过打开应用的manifest.json文件，切换到代码视图，在**app-plus -> statusbar 下添加immersed节点并设为false**。

"app-plus" : { "statusbar": { "immersed": false }, }

(2) 其次可通过顶部状态栏占位的方式来解决页面顶部直通状态栏区域的问题。

当设置 “navigationStyle”:“custom” 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(–status-bar-height) 的 view 放在页面顶部，同时需使用plus.navigator.getStatusbarHeight()来动态计算系统状态栏的高度barHeight，然后设置页面主view的样式:style="{'margin-top':barHeight+'px'}"，来避免页面内容出现在状态栏。

【本文地址】

公司简介

联系我们