2021-06-21

在开发微信小程序的过程中，我们发现只是官方默认的header头部，满足不了设计需求，这里我们以Uni App为例讲解一下。

官方文档：navigationStyle 导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮)。
文档地址: https://uniapp.dcloud.io/collocation/pages?id=pages

1、不同的机型，状态栏的高度是不一样的

uni.getSystemInfo({
    success:function(e){
		Vue.prototype.windowHeight = e.windowHeight *2
		Vue.prototype.statusBar    = e.statusBarHeight *2
		Vue.prototype.customBar    = 88
		if(e.platform == "devtools"){
		     Vue.prototype.platformType ='devtools'
		}else if(e.platform == "ios"){
             Vue.prototype.platformType ='ios'
		}else if(e.platform == "android"){
             Vue.prototype.platformType ='android'
		}
    }
})

2、根据状态栏高度，编写header组件

<template>
    <view class="hy-body-wrap" :style="{'padding-top':style}">
		<image v-if="baseUrl && backImg" class="back-box" :src="baseUrl+'user/back-user.png'" :style="{'height':style}"></image>
		<view class="c-head-wrap" :class="[{'g-border':borderAsync},{'back':!backImg}]" :style="{'padding-top': statusBarH + 'rpx'}">
			<view class="head-flex-box" :style="[{'height': customBarH + 'rpx', 'color': titleTintColor}, bgColor]">
			    <!-- 返回 -->
			    <view v-if="isBack" @tap="goBack" class="go-back-btn g-cen-y">
						
			    </view>
				<view v-else class="right-back"></view>
			    <!-- <slot name="headerL"></slot> -->
			    <!-- 标题 -->
			    <view :class="[{'text-left':platformType !='ios'},{'ff':backImg}]" class="head-title flex1 g-cen-cen" v-if="title">
			        {{title}}
			    </view>
			    <view class="flex1" :class="[searchRadius ? 'uni_searchRadius' : '']" v-if="search"> />
			        <input class=" flex1" type="text" placeholder="搜索" placeholder-style="color: rgba(255,255,255,.5);" />
			    </view>
			    <!-- 右侧 -->
			    <view class="right-back">
			        <slot name="iconfont"></slot>
			        <slot name="string"></slot>
			        <slot name="image"></slot>
			    </view>
			</view>
		</view>
        
		<slot name="body"></slot>
		<slot name="nav"></slot>
		<slot name="search"></slot>
    </view>
</template>
 
<script>
import {mapActions,mapGetters} from 'vuex'
export default {
	data() {
		return {
			statusBarH: this.statusBar,
			customBarH: this.customBar
		}
	},
	props: {
		isBack: { type: [Boolean, String], default: true },
		title: { type: String, default: '' },
		titleTintColor: { type: String, default: '#343434' },
		bgColor: Object,
		center: { type: [Boolean, String], default: false },
		search: { type: [Boolean, String], default: false },
		searchRadius: { type: [Boolean, String], default: false },
		fixed: { type: [Boolean, String], default: false },
		hei:{type:Number,default:0},
		borderAsync:{type:Boolean,default:false},
		backImg:{type:Boolean,default:false}
	},
	computed: {
		style() {
			let hei = `${this.customBarH+this.statusBarH+this.hei}rpx`;
			let _style = hei;
			this.setStatusBarH(this.customBarH+this.statusBarH+'rpx');
			return _style
		},
		...mapGetters(['baseUrl'])
		
	},
	methods: {
		...mapActions(['setStatusBarH']),
		goBack() {
			uni.navigateBack()
		}
	}
}
</script>
<style lang="scss" scoped>
.hy-body-wrap{
	.back-box{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 12;
	}
	.c-head-wrap{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 100;
		&.back{
			background-color: #fff;
		}
		.head-flex-box{
			display: flex;
			align-items: center;
			position: relative;
			.flex1{
				flex:1;
			}
			.head-title{
				font-size: 32px;
				&.ff{
					color: #fff;
				}
				&.text-left{
					justify-content: flex-start;
				}
			}
			.go-back-btn{
				padding-left: 31px;
				height: 100%;
				width:80px ;
				box-sizing: border-box;
				&::after{
					content: "";
					width: 14px;
					height: 28px;
					background: url($baseUrl+'icon/jiao-left.png') no-repeat center;
					background-size: cover;
				}
			}
			.right-back{
				width: 30px;
				height: 100%;
			}
			
		}
	}
}
</style>

3、引用方式

<template>
	<section class="work-wrap" >
		<header-box :isBack="false" title="这时title内容" />
	</section>
</template>
<script>
import api from "$api"
import headerBox from '$common/header/headerBox'
export default {
	data() {
		return {
			
		};
	},
	components:{
		headerBox
	}
}
</script>