zoukankan      html  css  js  c++  java
  • 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"); 单独设置本页面状态样式

  • 相关阅读:
    01 Vue的起步和插值表达式
    06 扩展的对象的功能
    05 解构赋值
    04 函数之扩展运算符、箭头函数
    03 函数之默认值、剩余参数
    02 模板字符串
    01 let和const命令
    28 Bootstrap排版
    27 Bootstrap的列偏移
    26 Bootstrap的栅格系统
  • 原文地址:https://www.cnblogs.com/aui-js/p/13035455.html
Copyright © 2011-2022 走看看