介绍
用于自定义导航栏时的状态栏占位,Navbar、Notify 等定位在顶部的元素会使用到。
状态栏高度是通过 uni.getSystemInfoSync().statusBarHeight 获取的,在 app, h5 和小程序都可以直接使用,在 h5 端状态栏高度为 0,其他两个端为设备的状态栏的高度。
INFO
如果应用是嵌套在 app 的 webview 中,uniapp 提供的接口获取的状态栏高度跟 h5 一样,都是 0;如果要全屏展示,则需要 app 原生那边提供接口来获取状态栏高度。
针对此场景,要使 StatusBar 正常使用,需要全局设置 StatusBar 组件的 height 属性,且要设置为一个 css 变量,在获取到手机状态栏高度时,将其声明到 html 元素上。举例如下:
ts
// main.ts
// 1. 全局设置 `StatusBar` 组件的 `height` 属性
// !!! 切记变量名不要设置为 `--status-bar-height`,避免被 uniapp 覆盖掉。
import { setConfig } from 'sard-uniapp'
setConfig({
statusBar: {
height: 'var(--app-status-bar-height)',
},
})
// 2. 获取状态栏高度
// 假设接口如下
const statusBarHeight = window.android.getBarHeight()
// 3. 声明到 html 元素上
document.documentElement.style.setProperty(
'--app-status-bar-height',
statusBarHeight + 'px',
)js
// main.ts
// 1. 全局设置 `StatusBar` 组件的 `height` 属性
// !!! 切记变量名不要设置为 `--status-bar-height`,避免被 uniapp 覆盖掉。
import { setConfig } from 'sard-uniapp'
setConfig({
statusBar: {
height: 'var(--app-status-bar-height)',
},
})
// 2. 获取状态栏高度
// 假设接口如下
const statusBarHeight = window.android.getBarHeight()
// 3. 声明到 html 元素上
document.documentElement.style.setProperty(
'--app-status-bar-height',
statusBarHeight + 'px',
):::
引入
js
import StatusBar from 'sard-uniapp/components/status-bar/status-bar.vue'代码演示
基础使用
vue
<template>
<sar-status-bar />
</template>API
StatusBarProps
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| root-class | 组件根元素类名 | string | - |
| root-style | 组件根元素样式 | StyleValue | - |
| height | 手动设置状态栏高度, | string | - |
| reverse | 设置宽度而不是高度 | boolean | false |
StatusBarSlots
| 插槽 | 描述 | 属性 |
|---|---|---|
| default | 自定义默认内容 | - |