引领中国IT教育新模式、新理念、新成效!
WEB前端框架: 电脑版  |  手机H5版  |  手机APP版  |  WEB后端框架:PHP框架
他的提问
他还没有发布过任何技术问题~
他的解答
他还没有解答任何技术问题~
APP混合式开发

H5+状态栏透明(沉浸式)、全屏、背景颜色和电量文字颜色的相关设置说明

2020-08-13 14:22:43 由元铸老师发布
回答1 点赞0 阅读97

在做混合式APP开发时,会涉及到状态栏的控制问题。而状态栏的设置又有不同的方法来处理。本文重点把几种特殊情况一一做说明。

1个答案, 其中有0个被标为正确答案
我来解答

元铸 老师

于2020年08月13日 14:23:14解答

0人点赞

1、沉浸式状态栏

如果页面顶部是图片,一般会把状态栏变成透明。

首先可以检测下当前环境是否支持沉浸式状态栏,检测语句:

//是否支持沉浸式状态栏
alert(plus.navigator.isImmersedStatusbar());
默认是不支持的,会弹出false. 想让环境支持,需要修改项目下的配置文件manifest.json

“plus”:{
“statusbar”: {
“immersed”: true
},

}
修改完成后,会弹出true.

终端支持:

Android4.4及以上系统支持;

iOS7.0及以上系统支持。

2、状态栏全屏

全屏并非状态栏透明或变色,而是没有状态栏,也就是看不见电量、信号那条了。
设置语句:

//参数:true - 全屏;false - 不全屏
plus.navigator.setFullscreen(true);

终端支持:
没有终端类型限制

3、状态栏背景色

修改背景色一般用于页面顶部背景色为纯色的场景,修改成和页面一致的背景色,使页面更和谐。

修改语句:

//设置系统状态栏背景色
plus.navigator.setStatusBarBackground(’#6495ED’);

终端支持:

Android5及以上系统支持;

iOS7.0及以上系统支持。

4、状态栏文字颜色

与背景色调整相同,如果背景图颜色不当,会造成前景的信号栏文字颜色与背景太相近,看不清前景,此时需要调整前景色。
前景色的使用限制更多些,只能设置黑或白,设置语句:

//参数:dark - 黑色; light - 白色
plus.navigator.setStatusBarStyle(‘light’);

终端支持:

Android5只有小米和魅族支持,Android6及以上所有安卓支持;

iOS7及以上支持


保存对当前提问的修改
收起
注:答案超过50个时,该问题将被锁定不允许再解答。
提交您的解答
收起