上篇文章实现了沉浸式状态栏,如果不使用MUI的导航栏可以不用关心这个问题。由于我们的项目一开始被大量使用了MUI的导航栏,所以决定解决这个问题,不然就要对项目做大量的修改,时间成本太高。
问题描述与分析
设置了沉浸式状态栏之后,使用mui.openWindow()跳转时隐藏原生导航栏,在目标页面中加入MUI的导航栏,目标页面代码和界面效果如下:
<!doctype html><html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.min.css" rel="stylesheet" /></head><body><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">标题</h1></header><script src="js/mui.min.js"></script><script type="text/javascript">mui.init()</script></body></html>
界面效果
如上图所示,MUI的导航栏高度只剩下44,看mui.css源码可知:MUI将导航栏的高度、页面包含导航栏后某些样式的上间距都默认指定为了44。
解决方案
解决方案就是重写MUI的样式,将44的地方改为64;然后在mui.min.js中对iPhone X系列手机进行适配(iPhone X系列手机的导航栏高度88,单纯的把样式改为64是不行的)。
重写MUI样式
在mui.min.css文件末尾加入如下代码:
/*重写MUI *解决沉寖式状态栏导致导航栏高度少20px的问题*/.mui-bar-nav {height: 64px;padding-top: 20px;}.mui-bar-nav ~ .mui-content{padding-top: 64px;}.mui-bar-nav ~ .mui-content .mui-pull-top-pocket{top: 64px;}.mui-bar-nav ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-vertical{top: 64px;}.mui-bar-nav ~ .mui-content .mui-slider.mui-fullscreen{top: 64px;}
注意:工程中一般引入mui.min.css和mui.min.js文件,min表示压缩过的文件(剔除了多余的字符);mui.css和mui.js是提供给开发者阅读的。
也可以不重写MUI,只需要给body添加mui-plus、mui-statusbar 和mui-statusbar-offset样式(这里是类选择器):
<body class="mui-plus mui-statusbar mui-statusbar-offset">
MUI考虑到了沉浸式对导航栏的影响,MUI实现的源码如下:
.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav{height: 64px;padding-top: 20px;}.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav ~ .mui-content{padding-top: 64px;}.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-nav ~ .mui-content .mui-pull-top-pocket{top: 64px;}.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-header-secondary{top: 64px;}.mui-plus.mui-statusbar.mui-statusbar-offset .mui-bar-header-secondary ~ .mui-content{padding-top: 94px;}
注意:上面的 .mui-bar-header-secondary 表示第二个导航栏的样式,我们的重写只考虑一个导航栏的情况。
但是这种方式,依然避免不了要对iPhone X系列手机做适配,并且需要对每个用到MUI导航栏的html文件做修改(给body加样式),这违背了我们的初衷。这里只是提一下,是否使用要根据项目的实际情况决定。
适配iPhone X系列手机
在mui.min.js文件末尾加入如下代码:
/*** 适配iPhone X 系列手机的导航栏(包括状态栏)*/mui.plusReady(function(){if(plus.navigator.isImmersedStatusbar() && isIPhoneX()){//.mui-bar-navvar nav = document.querySelector(".mui-bar-nav");if(nav){nav.style.cssText="height:88px; padding-top: 44px;";} else {return;}//.mui-bar-nav ~ .mui-contentvar content = document.querySelector(".mui-content");if (content) {content.style.paddingTop = "88px";} else {return;}//.mui-bar-nav ~ .mui-content .mui-pull-top-pocketvar pullTopPocket_Arr = content.querySelectorAll(".mui-pull-top-pocket");if (pullTopPocket_Arr) {pullTopPocket_Arr.forEach(function(value){value.style.top = "88px";});}//.mui-bar-nav ~ .mui-content.mui-scroll-wrapper .mui-scrollbar-verticalvar scrollbarVertical = document.querySelector(".mui-content.mui-scroll-wrapper .mui-scrollbar-vertical");if (scrollbarVertical) {scrollbarVertical.style.top = "88px";}//.mui-bar-nav ~ .mui-content .mui-slider.mui-fullscreenvar slider_fullscreen_Arr = content.querySelectorAll(".mui-content .mui-slider.mui-fullscreen");if (slider_fullscreen_Arr) {slider_fullscreen_Arr.forEach(function(value){value.style.top = "88px";});}}});/*** 判断是否为iPhone X 系列机型*/function isIPhoneX(){if(plus.device.model.indexOf('iPhone') > -1 && screen.height >= 812){return true;}else{return false;}}
效果
根据上面的解决方案实现后的效果如下:
转载自:/p/cb1a73fd