android h5状态栏消息,H5+状态栏透明(沉浸式)/全屏/设置颜色 整理

本文详细介绍了如何使用H5+在移动APP中设置状态栏,包括沉浸式状态栏、全屏显示、背景色修改和文字颜色调整。支持的终端系统包括Android4.4+和iOS7.0+。通过修改manifest.json配置文件和调用plus.navigator相关方法,可以实现状态栏的个性化定制。
摘要由CSDN通过智能技术生成

H5+对web APP状态栏设置整理:

开发工具:HBuilder

直接新建移动APP项目

测试方法为HBuilder的ios真机测试

1、沉浸式状态栏

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

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

//是否支持沉浸式状态栏

alert(plus.navigator.isImmersedStatusbar());

默认是不支持的,会弹出false. 想让环境支持,需要修改项目下的配置文件manifest.json

"plus":{

"statusbar": {

"immersed": true

},

...

}

修改完成后,会弹出true.效果如下:

bVTAOs?w=719&h=1280

终端支持:

Android4.4及以上系统支持;

iOS7.0及以上系统支持。

2、状态栏全屏

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

设置语句:

//参数:true - 全屏;false - 不全屏

plus.navigator.setFullscreen(true);

效果如下:

bVTAQa?w=719&h=1280

终端支持:

没有终端类型限制

3、状态栏背景色

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

修改语句:

//设置系统状态栏背景色

plus.navigator.setStatusBarBackground('#6495ED');

效果如下:

bVTAVy?w=750&h=1334

终端支持:

Android5及以上系统支持;

iOS7.0及以上系统支持。

4、状态栏文字颜色

与背景色调整相同,如果背景图颜色不当,会造成前景的信号栏文字颜色与背景太相近,看不清前景,此时需要调整前景色。

前景色的使用限制更多些,只能设置黑或白,设置语句:

//参数:dark - 黑色; light - 白色

plus.navigator.setStatusBarStyle('light');

效果如下:

bVTAVG?w=750&h=1334

终端支持:

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

iOS7及以上支持

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值