经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
H5+ API 设置手机状态栏颜色以及沉浸式状态栏
来源:cnblogs  作者:那个人总在笑  时间:2021/2/18 15:31:29  对本文有异议

设置状态栏背景颜色

  1. plus.navigator.setStatusBarBackground('#38c');

设置状态栏文字颜色(只能设置黑或白   light -> 白色  dark -> 黑色 )

  1. plus.navigator.setStatusBarStyle('light');

 

沉浸式状态栏(系统支持:Android4.4及以上、iOS7.0及以上)

1、判断是否支持沉浸式

  1. plus.navigator.isImmersedStatusbar()

默认情况下是不支持的,结果是false,需要修改项目中的配置文的配置文件manifest.json

  1. "plus":{
  2. "statusbar": {
  3. "immersed": true
  4. },
  5. ...
  6. }

2、获取状态栏高度

开启了沉浸式,状态栏高度变为0,页面就会往上移,头部和状态栏重合,所以我们需要设置页面头部区域的顶部内边距为状态栏的高度

  1. plus.navigator.getStatusbarHeight()

通过方法判断是否支持沉浸式,如果支持,拿到高度后,在页面中通过设置样式,为状态栏留出相应的位置

顺便说一下,沉浸式是应用级的,不能动态设置,只能通过修改配置,生效后所有页面都会变成沉浸式的,所以最好写成公用的样式或方法去调整

 

样式调整前:

 

样式调整后:

原文链接:http://www.cnblogs.com/web-wy/p/14386041.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号