mubrand 甲木产品前端

单页设置沉浸式

2016-12-20 mubrand HTML5+

manifest下设置沉浸式是全局通用的，但是某些页面需要单独使用时，比如头部通知栏的背景颜色等，就需要再当前页面单独设置：

建议ios下实用沉浸式，安卓的想试可以慢慢玩各种调整

代码如下

<script type="text/javascript" charset="utf-8">
            mui.init();
            mui.plusReady(function() {
            	// 设置系统状态栏白色
				//plus.navigator.setStatusBarStyle("UIStatusBarStyleBlackOpaque");

            	var topoffset = '45px';
            	// 兼容immersed状态栏模式
            	if(plus.navigator.isImmersedStatusbar()){
			    	var immersed = 0;
					var ms = (/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent);
					// 当前环境为沉浸式状态栏模式
					if(ms&&ms.length>=3){
					    immersed = parseFloat(ms[2]);// 获取状态栏的高度
					}
					topoffset = (immersed + 45)+'px';
					/*调整高度*/
			    	document.querySelector(".mui-bar-nav").style.paddingTop = immersed+'px';
			     	document.querySelector(".mui-bar-nav").style.height = topoffset; 
			     	document.querySelector(".mui-bar-header-secondary").style.top = topoffset; 
			     	//document.querySelector(".mui-content").style.marginTop = topoffset; 
			    }
            });
</script>

系统状态栏背景参数：

iOS平台可支持对系统状态栏样式的配置，在应用manifest.json文件的plus->distribute->apple下添加UIStatusBarStyle进行控制，默认值为"UIStatusBarStyleDefault"。

值	样式
UIStatusBarStyleDefault	默认样式，iOS6及以下系统状态栏为黑底白字，iOS7及以上系统用于定义系统状态栏上文字颜色为黑字（适用于浅色背景）
UIStatusBarStyleBlackOpaque	深色背景色样式，iOS6及以下系统状态栏为黑底白字，iOS7及以上系统用于定义系统状态栏上文字颜色为白色（适用于深色背景）
UIStatusBarStyleBlackTranslucent	iOS6及以下系统在启动界面为灰底白字，iOS7及以上系统与UIStatusBarStyleBlackOpaque效果一样

标签: 打包