mui android 状态栏,MUI-设置沉浸式状态栏后MUI导航栏的高度问题

上篇文章实现了沉浸式状态栏，如果不使用MUI的导航栏可以不用关心这个问题。由于我们的项目一开始被大量使用了MUI的导航栏，所以决定解决这个问题，不然就要对项目做大量的修改，时间成本太高。

原创文章,欢迎转载.转载请注明出处: https://www.jianshu.com/p/cb1a732022fd

问题描述与分析

设置了沉浸式状态栏之后，使用mui.openWindow()跳转时隐藏原生导航栏，在目标页面中加入MUI的导航栏，目标页面代码和界面效果如下：

标题

mui.init()

界面效果

如上图所示，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样式(这里是类选择器)：

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;

}

}

效果

根据上面的解决方案实现后的效果如下：

问题解决后的效果