自定义头部导航

自定义头部导航概述

自定义头部导航的实现原理是利用 fixed 定位将导航主体定位在页面头部，然后在插槽内部自由地实现自定义头部导航布局。

我们为大家提供了 ux-header 组件，可以快速实现自定义头部布局。

ux-header 组件属性

属性	类型	默认值	作用
height	Number	100	组件高度，单位 rpx
zIndex	Number	999	组件 z-index 值
space	Boolean	true	是否产生一个与组件同高的占位元素
statusBarBg	String	rgba(0,0,255,0.35)	手机端顶部状态栏背景色
background	String	#3888FF	导航背景颜色

运行图示

注意事项

您需要开启自定义头部导航配置 ( pages.json 找到对应页面属性，进行如下修改 ):

{
	"path" : "pages/layout/navigation/header-bar",
	"style" : 
	{

		"enablePullDownRefresh" : false,
		"navigationStyle": "custom",
		"navigationBarBackgroundColor": "transparent"
	}
}

演示代码

<template>
	<ux-header>
		<view class="ux-flex ux-row ux-align-items-center ux-space-between">
			<!-- 页面功能按钮，返回 回首页等 -->
			<view class="ux-flex ux-row ux-align-items-center">
				<view hover-class="ux-tap">
					<text 
					@tap="back" 
					class="ux-icon header-icon-button ux-text-center">{{"\ue643"}}</text>
					<!-- 其他按钮 -->
				</view>
			</view>
			<!-- 中间标题文本 -->
			<view class="ux-flex ux-row ux-align-items-center ux-flex1">
				<text class="ux-text ux-color-white">自定义标题</text>
				<!-- 其他内容 -->
			</view>
			<!-- 右侧功能 -->
			<view class="ux-flex ux-row ux-align-items-center">
				<view hover-class="ux-tap">
					<text 
					@tap="messageTag" 
					style="font-size:38rpx;"
					class="ux-icon header-icon-button ux-text-center">{{"\ue666"}}</text>
				</view>
				<!-- 其他按钮 -->
			</view>
		</view>
	</ux-header>
	<view class="ux-body">
		<!-- 页面内容布局 -->
	</view>
</template>
<script lang="uts">
export default {
	data() {
		return {
			
		}
	},
	methods: {
		back : function(){
			uni.navigateBack()
		},
		messageTag : function(){
			uni.showToast({icon:"none", title:"hi..."})
		}
	}
}
</script>
<style scoped>
.header-icon-button{width:100rpx; height:100rpx; font-size:32rpx; line-height:100rpx; color:#FFFFFF;}
</style>