Trust
Trust
  • 发布:2017-07-05 16:46
  • 更新:2019-01-07 15:19
  • 阅读:23771

【示例】html5plus应用实现沉浸式状态栏

分类:HTML5+

开启沉浸式状态栏

沉浸式状态不支持动态设置,属于应用级的。此类参数信息,通常在manifest.json中配置。
manifest.json->plus节点下

"statusbar": {  
	"immersed": true //开启沉浸式状态栏  
}

配置后,运行看到首页是这样的。

我的天,Webview里面的内容上天了,这显然不是我们期望的沉浸式状态栏的样子。

设置Webview的状态栏颜色

上面这种情况,在html5plus应用开发中,可以通过设置Webview的状态栏样式,模拟出一个状态条来填充状态栏部分的空间。
终端支持

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

首页

无论是launchwebview还是secondwebview,都是在manifest.json中配置相关的参数信息。
manifest.json->plus->launchwebview

"launchwebview": {  
	"statusbar": {  
		"background": "#FF3333"  
	}  
}

此时,再次运行,我们看到的效果是这样的。

Webview的内容出现在了正常的位置,这才是正确的样子。

普通Webview

普通的Webview,可以在创建的时候,设置statusbar的background来填充状态栏颜色。

webview = plus.webview.create('test.html', 'test', {  
	statusbar: {  
		background: '#1478ee'  
	}  
});

有titleNView的Webview

如果Webview配置了titleNView,创建Webview时,会取titleNView下的backgroundColor值,填充状态栏颜色。

webview = plus.webview.create('test.html', 'test', {  
	titleNView: {  
		titleText: '测试页',  
		backgroundColor: '#fb6f18'  
	}  
});

效果是这样的

为了区分开来,这里特地使用了不同的颜色。
Webview窗口的系统状态栏区域样式
窗口标题栏控件样式

前景色

调整状态栏颜色后,有时会出现系统状态栏部分的文字不清楚的情况。这时候,需要调调整前景色。
前景色的设置,受到的限制更多,只有“dark”和“light”两个选项。
同时前景色处理在终端支持方面

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

manifest.json配置

manifest.json->plus->statusbar

"statusbar": {  
	"style": "dark"  
}

调用API

也可以通过调用相关API进行设置调整,设置系统状态栏样式

plus.navigator.setStatusBarStyle('dark');

注意事项

  • 黑白灰等以及接近黑白灰的颜色不支持设置为状态栏前景色,防止与前景色一致导致状态栏文字看不到。

更多

更多关于状态栏的设置,参考状态栏大全-状态栏透明(沉浸式)、变色及全屏的区别等相关文章。
附件中提供了一个最简的沉浸式状态栏示例工程,下载后真机运行即可体验。

8 关注 分享
Neil_HL 5***@qq.com lhyh 过把瘾就死 Float echoer 4***@qq.com freedemon

要回复文章请先登录注册

任我皮

任我皮

ios设置为沉浸式状态栏后,列表上拉时状态栏会消失是怎么回事
2019-01-07 15:19
Trust

Trust (作者)

回复 wenju :
黑白灰等以及接近黑白灰的颜色不支持设置为状态栏前景色,防止与前景色一致导致状态栏文字看不到。
2018-06-27 15:22
ladesign

ladesign

mark+++
2018-06-05 14:39
秋天无风

秋天无风

回复 Trust :
害我调了两个晚上
2018-03-28 23:59
freedemon

freedemon

感谢套哥分享!
我补充一点,很多人的需求都是项目做好的最后来沉浸式处理,并且mui.openWindow用得比较多,又不想每处都回去改,可以在一个全局js里面进行函数劫持,代码如下:
{
//劫持mui.openwindow
let openw = mui.openWindow;
mui.openWindow = function(url,id,opt){
if (!opt.styles) {
opt.styles = {};
}
opt.styles.statusbar = {background: '#ff0000' };
openw(url,id,opt);
};
}
2018-02-11 15:33
5***@qq.com

5***@qq.com

mark++
2017-11-06 17:45
Trust

Trust (作者)

回复 wenju :
黑白灰等某些纯色不支持的,防止与前景色一致导致状态栏文字看不到。
2017-09-19 18:04
wenju

wenju

不知道为什么有的android手机statusbar:{background: '#000000'}是无效的, (华为mate7)
必须statusbar:{background: '#2C2C32'} 不能是纯黑色
2017-08-07 14:09
wenju

wenju

简单易懂 赞一个
2017-08-07 11:08
5***@qq.com

5***@qq.com

mark下
2017-07-05 19:37