# HeaderBar 自定义顶部

注意

自定义HeaderBar会引起下拉刷新的header位置从顶部开始

# 引入

"navigationStyle": "custom", 
"usingComponents": {
  "m-header-bar": "mind-ui-weapp/header-bar/index"
}

# 示例

<m-header-bar back title="有返回按钮" />

<m-header-bar bgcolor="#ff9902" title="自定义背景色" />

<m-header-bar bgcolor="linear-gradient(45deg, #9000ff , #5e00ff)" title="渐变背景色" />

<m-header-bar bg-image="https://note-file.ixook.com/FiDc9WTfG9DwiFrbYRl6E6ljShqF" title="自定义背景图" />

<m-header-bar title-color="center" title="标题字体色" />

<m-header-bar align="center" title="标题居中对齐" />

<m-header-bar loading title="加载中" />

<!-- 自定义标题区域内容 -->
<m-header-bar>
	<view class="custom-title">
		<view class="title">自定义 Header-bar</view>
		<view class="subtitle">副标题</view>
	</view>
</m-header-bar>
/* 示例使用的自定义标题区域内容样式 */
.custom-title {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.title {
  font-size: 30rpx;
}

.subtitle {
  font-size: 24rpx;
  color: #aaa;
}

# Properties

参数 说明 类型 可选值 默认值
visible 是否显示 Boolean false
title 标题 String
loading 显示加载中 Boolean false
color 标题颜色 String #000000
align 标题对齐方式,默认 ios 系统居中对齐,Android 平台左对齐 String left center
bgcolor 背景色,支持渐变值 String #ffffff
bg-image 背景图片 String
back 是否显示返回按钮 Boolean false
back-color 返回按钮颜色 String #000000
delta navigateBackdelta 参数,当 backtrue 的时候有效 Number 1

# slot

名称 说明
自定义标题内容区域