Header 头部

头部用于承载页面的标题与返回入口，固定显示在内容顶部。组件支持自定义标题、左侧图标、背景色，以及状态栏占位与固定定位。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-header 的用法，可按需组合。

<template>
  <mu-header title="页面标题" />
</template>

标题

设置头部居中显示的文字内容。

<mu-header title="订单详情" />

左侧图标

设置左侧图标的名称，取值为图标列表中的名称。

<mu-header title="返回" left-icon="left" />

显示左侧图标

控制左侧图标是否显示，默认为显示。

<mu-header title="无返回" :show-left-icon="false" />

背景色

设置头部背景色，可使用主题变量或任意合法颜色。

<mu-header title="主题色头部" bg-color="var(--mu-color-primary)" />

状态栏

控制是否为系统状态栏预留高度。

<mu-header title="含状态栏" :status-bar="true" />

固定定位

开启后头部固定在页面顶部，不随内容滚动。

<mu-header title="固定头部" :fixed="true" />

层级

设置固定定位时的层级，数值越大越靠上。

<mu-header title="高层级" :fixed="true" :z-index="200" />

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
title	头部显示的文字内容	string	-
leftIcon	左侧图标名称，取值为图标列表中的名称	string	left
showLeftIcon	是否显示左侧图标	boolean	true
bgColor	头部背景色，可使用主题变量或任意合法颜色	string	var(--mu-color-white, #FFFFFF)
statusBar	是否为系统状态栏预留高度	boolean	false
fixed	是否固定在页面顶部	boolean	false
zIndex	固定定位时的层级	number	100
customClass	自定义类名，附加在头部根节点上以覆盖默认样式	string	-
customStyle	自定义行内样式，直接作用于头部根节点	any	-

事件

组件支持以下事件。

事件名	说明	回调参数
leftClick	点击左侧图标时触发，可用于处理返回等操作	event: UniEvent