上篇文章實現(xiàn)了沉浸式狀態(tài)欄，如果不使用MUI的導航欄可以不用關心這個問題弥雹。由于我們的項目一開始被大量使用了MUI的導航欄夜畴，所以決定解決這個問題介衔，不然就要對項目做大量的修改，時間成本太高脚翘。
原創(chuàng)文章,歡迎轉載.轉載請注明出處: http://www.reibang.com/p/cb1a732022fd
問題描述與分析
設置了沉浸式狀態(tài)欄之后灼卢，使用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
*解決沉寖式狀態(tài)欄導致導航欄高度少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是提供給開發(fā)者閱讀的。
也可以不重寫MUI薄风，只需要給body添加mui-plus饵较、mui-statusbar 和mui-statusbar-offset樣式（這里是類選擇器）：
<body class="mui-plus mui-statusbar mui-statusbar-offset">
MUI考慮到了沉浸式對導航欄的影響，MUI實現(xiàn)的源碼如下：
.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加樣式）茄猫，這違背了我們的初衷。這里只是提一下逆粹，是否使用要根據(jù)項目的實際情況決定募疮。
適配iPhone X系列手機
在mui.min.js文件末尾加入如下代碼：
/**
* 適配iPhone X 系列手機的導航欄(包括狀態(tài)欄)
*/
mui.plusReady(function(){
if(plus.navigator.isImmersedStatusbar() && isIPhoneX()){
//.mui-bar-nav
var nav = document.querySelector(".mui-bar-nav");
if(nav){
nav.style.cssText="height:88px; padding-top: 44px;";
} else {
return;
}
//.mui-bar-nav ~ .mui-content
var content = document.querySelector(".mui-content");
if (content) {
content.style.paddingTop = "88px";
} else {
return;
}
//.mui-bar-nav ~ .mui-content .mui-pull-top-pocket
var 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-vertical
var 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-fullscreen
var 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;
}
}
效果
根據(jù)上面的解決方案實現(xiàn)后的效果如下：
