账户中心 退出系统
普通版本 weex版本

graceUI For Weex - 沉浸式状态栏优化


功能介绍

使用 uni-app 开发的 app,在关闭顶部导航的情况下默认开启了沉浸式,页面滑动时由于状态栏背景透明效果不好;

graceUI 封装了 graceImmersedStatusbar 组件,动态兼容沉浸式,使用方便;

关闭默认的头部导航

"pages": [ 
    {
        "path": "pages/index/index",
        "style": {
            "titleNView" : false
        }
    }
]

组件属性

bgColor : { type : String, default : "#FFFFFF" } //背景颜色,默认 none
为了兼容更好, 使用 linear-gradient(to right, #B100FF,#00B3FF) 方式设置背景颜色,纯色请使用2个相同的演示编码;
isFixed : { type : Boolean, default : false } // 是否使用 fixed 模式

原理说明

动态判断是否为app端,动态监测是否开启沉浸式,动态设置状态栏高度;

演示代码