DCloud_App_Array
DCloud_App_Array
  • 发布:2015-10-28 17:02
  • 更新:2022-11-04 14:06
  • 阅读:91244

Android平台设置沉浸式状态栏显示效果

分类:HTML5+

系列文章导航:
状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别
Android平台设置沉浸式状态栏显示效果
iOS平台设置沉浸式状态栏显示效果

正文:

应用可视区域到系统状态栏下透明显示效果,如下图所示:

此模式下应用占用全屏区域,而系统状态栏会拦截用户操作事件,此时需要预留出系统状态栏高度。
获取系统状态栏高度及沉浸式状态判断参考:如何动态判断沉浸式状态栏模式

HBuilder创建的应用默认不使用沉浸式状态栏样式,需要进行如下配置开启:
打开应用的manifest.json文件,切换到代码视图,在plus -> statusbar 下添加immersed节点并设置值为true。

"plus": {  
    "statusbar": {  
        "immersed": true  
    }  
}

如下图所示:

保存后提交App云端打包

注意:

  1. 真机运行不生效,需提交App云端打包后才生效;
  2. 此功能仅在Android4.4及以上系统有效。

状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别
Android平台5+SDK原生环境配置方法
iOS平台设置沉浸式状态栏显示效果

6 关注 分享
蔡繁荣 软猫猫 Trust 爆栈工程师 d***@sinnbo.com 1***@qq.com

要回复文章请先登录注册

6***@qq.com

6***@qq.com

这种方法,所有的页面的状态栏都是沉浸式,不是单独页面的,不符合
2022-11-04 14:06
DCloud_App_Array

DCloud_App_Array (作者)

回复 1***@163.com :
请单独发帖,详细说明复现问题的设备环境,上传复现问题的示例应用。
2020-05-11 11:14
1***@163.com

1***@163.com

回复 2***@qq.com :
安卓设置后 软件盘高度发生变化 不会自动调整webview高度怎么办。。
2020-05-11 11:10
2***@qq.com

2***@qq.com

"statusbar" : {
"immersed" : true,
}设置沉浸式状态栏,,高度塌陷怎么解决
2020-04-30 15:36
v***@vv1688.com

v***@vv1688.com

请问楼主,wap2app怎么去除导航栏,
{
"global": {
"webviewParameter": {
"titleNView": {
"background": "#FF3333",
"type":"light",
"autoBackButton": false,
"backgroundColor": "#FF3333",//导航栏背景色
"titleColor": "#FFFFFF",//标题颜色
"titleSize": "15px"

},
"statusbar": {
"background": "#FF3333",
//系统状态栏样式(前景色)
"style": "light"
},
2020-03-17 21:26
2***@qq.com

2***@qq.com

回复 g***@163.com :
解决了吗
可以指导下吗
2019-10-09 15:48
g***@163.com

g***@163.com

回复 骁骑 :
写着已过期,来个新的吧!!!!!
2018-11-13 17:54
lxl

lxl

回复 蜡笔不小心 :
不行呀,这样貌似是只把启动图片沉浸了,其它webview页面用启动图的背景不搭呀
2017-11-30 14:04
lxl

lxl

回复 Element :
这和手机有关,三星是半透明灰色,小米是全透明
2017-11-30 11:54
1***@163.com

1***@163.com

回复 1***@163.com :
这里有对于沉浸模式的详解http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.setStatusBarBackground
2017-10-26 16:08