# tui-status-bar 状态栏 会员组件
介绍
状态栏，用于自定义导航栏时顶部状态栏占位。
# 引入
# uni-app引入
第一种，手动引入（可全局引入）
import tuiStatusBar from "@/components/thorui/tui-status-bar/tui-status-bar.vue"
export default {
components:{
tuiStatusBar
}
}
第二种，开启easycom组件模式，如果不了解如何配置，可先查看 官网文档 (opens new window)。
# uni-app版本平台差异说明
| App-Nvue | App-vue | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
|---|---|---|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
# 微信小程序引入（可在app.json中全局引入）
{
"usingComponents": {
"tui-status-bar": "/components/thorui/tui-status-bar/tui-status-bar"
}
}
# 代码演示
部分功能演示，具体可参考示例程序以及文档API。
基础使用
通过 background 属性设置StatusBar背景色。
<tui-status-bar background="#fff"></tui-status-bar>
固定于顶部
通过 isFixed 属性设置组件是否固定与顶部。
<tui-status-bar background="#fff" isFixed></tui-status-bar>
# Slots
| 插槽名称 | 说明 |
|---|---|
| default | 标签内显示内容 |
# Props
| 属性名 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| background | String | 状态栏背景色 | transparent |
| isFixed | Boolean | 是否固定于顶部 | false |
| zIndex | Number | z-index值，isFixed为true时有效 | 998 |
# Events
注：uni-app端绑定事件使用@前缀，如@init；微信小程序原生使用bind前缀，如bindinit
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| init | 初始化时触发 | statusBarHeight：状态栏高度 |
# 特别说明
该组件为 会员组件，非开源内容，需开通会员才可获取使用。