上篇文章实现了沉浸式状态栏，如果不使用MUI的导航栏可以不用关心这个问题。由于我们的项目一开始被大量使用了MUI的导航栏，所以决定解决这个问题，不然就要对项目做大量的修改，时间成本太高。
原创文章,欢迎转载.转载请注明出处: https://www.jianshu.com/p/cb1a732022fd
问题描述与分析
设置了沉浸式状态栏之后，使用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-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;
}
}
效果
根据上面的解决方案实现后的效果如下：
问题解决后的效果
网友评论