H5+对web APP状态栏设置整理:
开发工具:HBuilder
直接新建移动APP项目
测试方法为HBuilder的ios真机测试
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及以上支持