mui关于设置沉浸模式的坑

本贴接原贴：http://ask.dcloud.net.cn/article/35389

在mui里面设置沉浸式，我知道大家都看过很多其他大佬的教程，我为什么还要写这篇的，因为有的时候在实际操作上会遇到你想不到的
一些问题，这里我来给大家仔细解析下：
1.配置manifest.json 配置文件目录
源码如下：一个ios和一个google的

"apple": {  
                "UIReserveStatusbarOffset":false  
            },  
            "google": {  
                "ImmersedStatusbar":true  
                },

2.开启配置，在节点plus下新加一个节点statusbar，如下：

    "plus": {  
        "splashscreen": {  
            "autoclose": true,/*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/  
            "waiting": false,"delay":"5"  
        },  
        "statusbar": {  
            "immersed":true,  
            "style":"dark"  
            },

3.配置完成后，mui就已经是沉浸模式了，下面我觉得才是重要的：
大家都知道，现在手机屏幕多样化，我们需要适配不同的屏幕，这时候我们要获取标题的高度，标题到顶点的高度，是否全面屏等，自适应的来配置。在这里我吃了个亏，研究了好久才解决，就是大家采用底部div栏的时候，会给子页面设置高度，我们在配置里要关注到这一点。

    function setAutoHeight() {  
                var topoffset = '45px';  
                var header = document.getElementById('myhead');  
                var title = document.getElementById('mytitle');  
                if(plus.navigator.isImmersedStatusbar()) {  
                    // 兼容immersed状态栏模式            
                    // 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置           
                    topoffset = (Math.round(plus.navigator.getStatusbarHeight()) + 45);  
                    header.style.height = topoffset + 'px';  
                    header.style.paddingTop = (topoffset - 45) + 'px';  
                    subpage_style.top = topoffset + 'px';  
                }  
            }

一个header 一个标题
<header id="myhead">
<h1 id="mytitle" class="mui-title" style="z-index: 111111;">
睁眼看世界
</h1>
</header>

因为用了底部的分栏，所以最后要动态的处理下 subpage的top

效果图如下：

刘海屏体验非常好
下载地址：