2***@qq.com
2***@qq.com
  • 发布:2019-05-28 08:50
  • 更新:2020-11-12 10:30
  • 阅读:3711

如何解决h5打包app头部和状态栏重合?

分类:HTML5+

如图,我使用h5 打包网站后 状态栏和app顶部重合在一起,这种问题改如何解决,网上的n种方法都试过了 都无效,救救小白吧

2019-05-28 08:50 负责人:无 分享
已邀请:
飘过大山

飘过大山 - 99

没看文档?https://ask.dcloud.net.cn/article/34921

s7team丶杰克

s7team丶杰克 - 努力敲代码~

var height = 0;  
var background = "#008c5e";  
if(plus.navigator.isImmersedStatusbar()){  
    height = plus.navigator.getStatusbarHeight();  
}  
var index = plus.webview.currentWebview();  
index.setCssText("div.statusbar{position:fixed;top:0; left:0;right:0;height:"+height+"px;background:"+background+";z-index:9999;}");
<div class="statusbar"></div>

写在最头部,可以设置固定颜色

另外头部css还需要定位最顶部元素,如body,加上 上边距 高度

index.setCssText("div.statusbar{position:fixed;top:0; left:0;right:0;height:"+height+"px;background:"+background+";z-index:9999;}body{padding-top:"+height+"px;}");
  • 2***@qq.com (作者)

    写在script里吗?请问

    2019-05-28 13:35

  • s7team丶杰克

    回复 2***@qq.com: 上门除了html代码其他都js的,你可以写js里面也看云写script标签里面

    2019-05-28 14:24

6***@qq.com

6***@qq.com

同问 我也是h5打包的 你的解决了吗

1***@qq.com

1***@qq.com

可以参考一下我封装的库

.initHeader {  
    z-index: 8;  
    position: relative;  
    height: $global-header-height;  
    overflow: auto;  
    box-sizing: border-box;  

    /* #ifdef APP-PLUS */  
    height: calc(var(--status-bar-height) + #{$global-header-height});  
    padding-top: var(--status-bar-height);  
    /* #endif */  

    &--fixed {  
        position: fixed;  
        top: 0;  
        left: 0;  
        width: 100%;  
        z-index: 9;  
        background-color: $globalColor-bgStyle;  

        & + view {  
            padding-top: $global-header-height !important;  

            /* #ifdef APP-PLUS */  
            padding-top: calc(var(--status-bar-height) + #{$global-header-height}) !important;  
            /* #endif */  
        }  
    }  
}
  • 6***@qq.com

    怎么个用法呀

    2020-11-12 10:41

  • 1***@qq.com

    回复 6***@qq.com: 这个是很平常的样式了呀,原理是判断为手机端的时候给个padding值,就是这样。。

    2020-11-12 11:45

该问题目前已经被锁定, 无法添加新回复