Mind UI

# HeaderBar 自定义顶部

WARNING

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

# 引入

"navigationStyle": "custom", 
"usingComponents": {
  "m-header-bar": "/dist/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="<s></s>ubtitle">副标题</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 navigateBack 的 delta 参数，当 back 为 true 的时候有效 Number — 1

# slot

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

← Navbar 选项卡 →