StatusBar 状态栏

概述

StatusBar 状态栏，主要用于自定义导航栏时状态栏占位，高度与状态栏相等。

引入

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "状态栏",
  "usingComponents": {
    "fui-status-bar":"/components/firstui/fui-status-bar/fui-status-bar"
  }
}

第二种：在根目录app.json文件中全局引入

  "usingComponents": {
     "fui-status-bar":"components/firstui/fui-status-bar/fui-status-bar"
  }

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 background 属性设置StatusBar背景色。

<fui-status-bar background="#fff"></fui-status-bar>

固定于顶部

通过 isFixed 属性设置StatusBar是否固定与顶部。

<fui-status-bar background="#fff" isFixed></fui-status-bar>

Slots

插槽名称	说明
default	标签内显示内容

Props

属性名	类型	说明	默认值	其他说明
background	String	状态栏背景色	transparent	-
isFixed	Boolean	是否固定在顶部	false	-
zIndex	Number	z-index值，isFixed为true时生效	99	-
isOccupy V2.3.0+	Boolean	当isFixed为true时，是否占据状态栏高度，避免高度塌陷。 注意：使用此属性请将组件放置页面最顶部	false	-

Events

事件名	说明	回调参数
bind:init	初始化时触发	event.detail = {   statusBarHeight:状态栏高度 }