上篇文章实现了沉浸式状态栏，如果不使用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
