主题
StatusBar 状态栏
根据系统状态栏高度提供顶部区域，可设置背景和固定定位。
支持平台
以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。
| App-vue | App-nvue | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 | H5 | PC | 快手小程序 | 钉钉小程序 |
|---|---|---|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
基础用法
vue
<!-- 状态栏占位区域 -->
<fui-status-bar background="#ffffff"></fui-status-bar>属性
| 属性 | 类型 | 说明 | 本地源码默认值 |
|---|---|---|---|
| background | String | 状态栏区域背景 | transparent |
| isFixed | Boolean | 是否将状态栏区域固定在顶部 | false |
| zIndex | Number | 固定定位时的层级，nvue 的层级规则有所不同 | 99 |
| isOccupy | Boolean | 控制外层是否尝试保留状态栏高度 | false |
事件
| 事件 | 说明 | 回调参数 |
|---|---|---|
| init | 组件创建时返回读取到的状态栏高度 | { statusBarHeight }，高度为带 px 的字符串 |
插槽
| 插槽 | 说明 |
|---|---|
| default | 状态栏区域内的内容 |
平台及实现说明
nvue 的层级表现与普通 Vue 页面不同，应结合实际页面验证。当前源码的 isOccupy 计算逻辑会对已有 px 后缀的高度再次追加 px，使用该属性前应先核对实际运行效果。