StatusBar 状态栏

17:06

说明

沉浸式状态栏占位组件。取系统状态栏高度撑起等高占位块（单位 px），把页面内容顶到状态栏下方，避免自定义导航栏与系统状态栏重叠；background 设置该区域的背景色（默认 transparent）。H5 无系统状态栏，高度恒为 0。

兼容性

平台	支持情况
App	✅ 支持（自定义导航栏下自动撑起状态栏高度）
H5	✅ 支持（无系统状态栏，高度恒为 0）
微信小程序	✅ 支持

示例

基础用法

默认透明背景，自动占据系统状态栏高度。

查看源码

<template>
    <!-- 占位状态栏，与系统状态栏同高 -->
    <ux-status-bar />
    <view class="content">
        <text>状态栏下方内容</text>
    </view>
</template>

<style scoped>
.content {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f2f3f5;
}
</style>

自定义背景色

通过 background 属性设置状态栏背景颜色。

查看源码

<template>
    <ux-status-bar background="#2979ff" />
    <view class="content">
        <text class="content-text">状态栏下方内容</text>
    </view>
</template>

<style scoped>
.content {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2979ff;
}
.content-text {
    color: #ffffff;
}
</style>

API

Props

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式	string | UTSJSONObject	-	-
customClass	自定义根节点样式类	string	''	-
background	背景设置	string	'transparent'	-

Events

ux-status-bar 无事件。

Slots

插槽名	说明	版本
default	状态栏内的自定义内容（默认留空）	-

注意事项

• H5 无系统状态栏，statusBarHeight 恒为 0、组件高度为 0（不占位），属正常表现。
• 高度取自 uni.getWindowInfo().statusBarHeight，iOS 横屏时为 0。
• background 默认为 transparent，仅占位不显色；沉浸式场景常传具体颜色与页面背景保持一致。
• 默认插槽的内容不会自动避让状态栏，仅用于在状态栏区域内补充自定义内容。
• 组件无事件。