单页设置沉浸式

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效果一样



标签: 打包

发表评论:

联系我(QQ/PHONE/WX):18603469707 晋ICP备16009925号-1