沉浸式下头部及页面调整

2016-12-26 mubrand mui

页面设置了沉浸式,相应的头部及页面结构也需要调整,防止头部和手机通知栏重叠,常用到的代码如下。

建议安卓下就别用沉浸式了,属于找虐。而且很多大平台也没有针对安卓做沉浸式的设计


代码:

<script type="text/javascript" charset="utf-8">
            mui.init();
            mui.plusReady(function() {
                var topoffset = '45px';
                // 兼容immersed状态栏模式
                if(plus.navigator.isImmersedStatusbar()){
                    var immersed = 0;
                    var ms = (/Html5Plus\/.+\s\(.*(Immersed\/(\d+\.?\d*).*)\)/gi).exec(navigator.userAgent);
                    // 当前环境为沉浸式状态栏模式
                    if(ms&&ms.length>=3){
                        immersed = parseFloat(ms[2]);// 获取状态栏的高度
                    }
                    topoffset = (immersed + 45)+'px';
                    /*调整高度*/
                    document.querySelector(".mui-bar-nav").style.paddingTop = immersed+'px';
                    document.querySelector(".mui-bar-nav").style.height = topoffset; 
                    document.querySelector(".mui-bar-header-secondary").style.top = topoffset; 
                    //document.querySelector(".mui-content").style.marginTop = topoffset; 
                }
            });
</script>

标签: hbuilder mui

评论:

11
2018-11-28 14:47
444为

发表评论:

联系我(QQ/PHONE/WX):18603469707 晋ICP备16009925号-1