DCloud_heavensoft
DCloud_heavensoft
  • 发布:2017-01-26 15:13
  • 更新:2021-09-06 14:05
  • 阅读:87426

状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别

分类:HTML5+

手机的顶部状态栏,也就是信号、电量那条,有4种状态,分别是正常、变色、透明(也称沉浸式状态栏)、消失(也就是全屏)。
后3种特殊用法,具体见下:

状态栏变色

常见使用场景:如果title背景为纯色且显眼,一般会把状态栏的背景色也变成title的颜色,看起来大气,比如流应用中的网易新闻。

写法:
使用5+API plus.navigator.setStatusBarBackground)。

首页配置
首页需要在manifest.json文件中,plus->launchwebview下添加statusbar节点,并配置background的值(格式为#RRGGBB)。

若首页为secondwebview,则调整launchwebview为secondwebview即可。

终端支持:

  • Android5及以上系统支持;
  • iOS7.0及以上系统支持。

前景色处理:
当背景色调整后,如果调整不当,会造成前景的信号栏文字颜色与背景太相近,看不清前景,此时需要调整前景色。
前景色的使用限制更多些,只能设置黑或白,通过plus.navigator.setStatusBarStyle('dark');设前景为黑色,'dark'换成light则前景色变为白色。
同时前景色处理在终端支持方面:

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

高度处理:此时webview高度没有全屏,webview高度+状态栏高度=手机屏幕高度。
也就是转场动画时,webview动画是不会通顶的,状态栏不会在转场时变化。

状态栏透明(沉浸式)

常见使用场景:如果页面顶部是图片,一般会把状态栏变成透明,此时同时会处理成滚动后恢复为纯色title,比如流应用中的36kr:


或者看视频https://v.qq.com/x/page/h0386sphgpt.html

写法:
Android平台设置沉浸式状态栏显示效果
iOS平台设置沉浸式状态栏显示效果

终端支持:

  • Android4.4及以上系统支持;
  • iOS7.0及以上系统支持。
    前景色处理:
    与背景色调整相同,如果背景图颜色不当,会造成前景的信号栏文字颜色与背景太相近,看不清前景,此时需要调整前景色。
    前景色的使用限制更多些,只能设置黑或白,通过plus.navigator.setStatusBarStyle('dark');设前景为黑色,'dark'换成light则前景色变为白色。
    同时前景色处理在终端支持方面:
  • Android5只有小米和魅族支持,Android6及以上所有安卓支持;
  • iOS7及以上支持

高度处理:
注意,此时webview高度为全屏,状态栏高度为0,也就是webview高度=屏幕高度。
状态栏背景透明后前景图标覆盖在webview顶部。
尤其注意此时dom里涉及fix定位计算的元素,可能需要重新排高度。
在状态栏透明的情况下,转场动画时,webview动画是会通顶的,状态栏那里也会有条线左右移动。

其他注意:
沉浸式状态栏不支持动态调整,属于应用级,真机运行不生效,需要提交到云端打包后有效。
一个app设置了沉浸式,就意味着里面的每个webview都变成沉浸式。
这可能会造成很多页面都需要调整高度,此时有一种方案,就是在webview创建时,允许通过一个参数设置把这个webview的状态条再模拟显示出来,plus.webview.create('http://m.weibo.cn/u/3196963860', 'test', {statusbar:{background:"#D4D4D4"}})。这样设置后,webview的高度重新回到状态栏下方,不再顶到屏幕顶部。
此api从HBuilder8.1 alpha版起生效。

示例:
在hello mui里的nav bar示例中,提供了原生的渐变头和HTML的渐变头2种示例,大家可以参考。

全屏显示 (没有状态栏)

常见使用场景:如果页面是全屏游戏,一般会直接让状态栏消失,也就是页面全屏。webview高度全屏了,状态栏没有了。
写法:
设置应用全屏显示
终端支持:
没有终端类型限制
高度处理:与状态栏透明相同,webview高度=屏幕高度,状态栏高度为0且不显示前景内容。需要注意dom里fix元素的调整。

19 关注 分享
Trust diken 爆栈工程师 杰哥seo lhyh n***@gmail.com 8***@qq.com vitwell 1***@qq.com 过把瘾就死 立树 刘先森 1***@qq.com Smart900zhang 大图APP 3***@qq.com liucheng100 一抱一个胖猪猪 1***@qq.com

要回复文章请先登录注册

DCloud_heavensoft

DCloud_heavensoft (作者)

回复 天使中的魔鬼 :
你要是配成沉浸式,且手机支持沉浸式,那图片自然顶到屏幕顶端了
2018-12-26 18:27
天使中的魔鬼

天使中的魔鬼

回复 DCloud_heavensoft :
我想问下采用wap2app的方式 在沉浸式模式下,如何处理状态栏高度,让图片铺满顶部
2018-12-26 16:40
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 指尖上的代码 :
在hello mui里的nav bar示例中,提供了原生的渐变头和HTML的渐变头2种示例,大家可以参考。
2018-08-14 15:54
指尖上的代码

指尖上的代码

沉浸式加transparent在安卓下ok在ios下不对少了状态栏的高度
2018-08-14 14:50
Yizhiyu

Yizhiyu

莫名其面的是我也没配置,只是在首页加了
mui.plusReady(function(){
plus.navigator.setStatusBarBackground('#c11c2d');
})
所有页面就成沉浸式的了。。
2018-05-31 14:51
c***@163.com

c***@163.com

回复 DCloud_heavensoft :
之前好像是没有这个问题,我最近升级到miui9.1,出现了这个问题,百度了一下,如果是MIUI9的系统还需要加上这段代码

Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
window.getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
2017-12-07 21:01
c***@163.com

c***@163.com

回复 DCloud_heavensoft :
我的是小米6
2017-12-07 20:46
c***@163.com

c***@163.com

回复 z***@163.com :
我也无法改变
2017-12-07 20:46
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 z***@163.com :
注意看文中的终端支持描述
2017-11-02 23:15
z***@163.com

z***@163.com

plus.navigator.setStatusBarStyle('dark');无法改变前景色是为啥?
2017-11-02 18:09