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	navigateBack 的 delta 参数，当 back 为 true 的时候有效	Number	—	1

slot

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