当前位置:   article > 正文

html移动端沉浸式状态栏,app沉浸式状态实现分享,解决状态栏遮挡顶部的问题...

h5页面用hbuilder模拟到手机上沉浸式全屏状态栏遮挡

解决方法:

1.增加标识:在在apicloud根目录中的congfig.xml中增加一个标识,标识value的值必须和下边判断代码中的一样

2.判断:在网站中需要设置头部距顶部距离的地方插入如下代码(用途是判断是自己app访问的话就调用指定样式)

if(navigator.userAgent.indexOf("app123") !=-1)

{

document.write('');

}

3.在apicloud根目录中的congfig.xml中开启沉浸式如:

4.在apicloud根目录中的index.html关闭全屏api.setFullScreen({fullScreen: false});

5.在网站中创建css样式文件,设置头部距离顶部的padding-top:30px;(这是解决网站头部的)根据自身网站不同情况可能要微调别的样式

6.在网站下载的APP源码目录\h5app\html\index.html中的

中添加如下代码(这是解决群聊头部的)

.bui-bar {padding-top:30px;}

7.如果要设定状态栏的样式就在在apicloud根目录中的index.html文件内查找  apiready = function() { 并在里边插入设置状态栏样式的代码

api.setStatusBarStyle({

color : 'rgba(0,0,0,0.3)'

});

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小蓝xlanll/article/detail/321390?site
推荐阅读
相关标签
  

闽ICP备14008679号