apicloud APP沉浸式状态栏设置

config.xml配置

<preference name="statusBarAppearance" value="true"/>
<preference name="iOS7StatusBarAppearance" value="true"/>

兼容android、ios设备,可以动态设置指定页面状态栏背景色以及字体颜色

/***设置状态栏样式
    @param {string} color APP状态栏背景颜色
    @param {string} style APP状态栏文字颜色
    @param {bool} contentTop 是否设置content顶部内边距
*/
function setStatusBar(color, style, contentTop) {
    api.setStatusBarStyle({
        color: color,
        style: style
    });
    // 沉浸式状态栏为 header 设置 paddingTop
    $api.fixStatusBar($api.dom('header'));
    $api.fixIos7Bar($api.dom('header'));
    $api.fixTabBar($api.dom('footer'));
    $('header').height(44);
    contentTop == false ? contentTop = contentTop : contentTop = true;
    if(document.querySelector("header") && contentTop == true)
    {
        // console.log(document.querySelector("header").offsetHeight);
        $(".content,.mui-content").css({'padding-top': document.querySelector("header").offsetHeight});
    }
}

页面调用 setStatusBar("rgba(255,255,255,.0)", "dark"); 单独设置本页面状态样式

posted @ 2020-06-03 09:33  风如白话  阅读(1625)  评论(0编辑  收藏  举报