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

最新推荐文章于 2022-08-09 14:19:22 发布

ruoyan8899

最新推荐文章于 2022-08-09 14:19:22 发布

阅读量473

点赞数

分类专栏： MUI 学习笔记文章标签： css html html5

原文链接：https://www.jianshu.com/p/cb1a732022fd

版权

学习笔记同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

MUI

2 篇文章 0 订阅

订阅专栏

本文介绍了在使用MUI框架时遇到沉浸式状态栏导致导航栏高度显示不正确的问题，以及如何通过重写MUI样式和适配iPhoneX系列手机来解决此问题。解决方案包括在mui.min.css中调整导航栏高度和内容的padding-top，以及在mui.min.js中添加针对iPhoneX的适配代码，确保在不同设备上导航栏显示正常。

摘要由CSDN通过智能技术生成

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