# tui-status-bar 状态栏

介绍

状态栏,用于自定义导航栏时顶部状态栏占位。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiStatusBar from "@/components/thorui/tui-status-bar/tui-status-bar"
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

事件名 说明 回调参数
init 初始化时触发 statusBarHeight:状态栏高度