uniapp 自定义头部、支持小程序对齐且和浏览器有安全高度

<template>
	<view class="Header-box" :class="{xcx: statusBarHeight, common: !statusBarHeight}" :style="{paddingBottom: `${statusBarHeight}px`}">
		<view class="header-fixed-box" :style="{
                background: noBg ? noBg : '',
				height: `${statusBarHeight}px`
            }">
			<view class="header-main-box"  :style="{height: `${statusBarHeight}px`}">
				<view v-if="!noLeft" @click="headerLeftClick" class="header-left-box header-operation">
					<image v-if="whiteback" class="header-left-back" mode="widthFix"
						src="../static/index/white.png" />
					<image v-else class="header-left-back" mode="widthFix" src="../static/index/black.png" />
				</view>
				<view class="header-title" :style="{color:titlecolor?titlecolor:' #fff'}">{{ pageTitle }}
				</view>
				<view @click="headerRightClick" :style="{paddingRight:rightPadding?rightPadding:'',color:rightColor?rightColor:''}" class="header-right-box header-operation">{{ rightText }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {
			// 右侧文字
			rightText: {
				default: "",
			},
			// 是否有背景色
			noBg: {
				default: false,
			},
			//是否有标题颜色
			titlecolor: {
				default: false,
			},
			//是否有白色左侧箭头
			whiteback: {
				default: true,
			},
			// 是否没有返回
			noLeft: {
				default: false,
			},
			notitle: {
				default: false,
			},
			// 右侧padding
			rightPadding: {
				default: false
			},
			rightColor:{
				default:false
			}
		},
		data() {
			return {
				pageTitle: "",
				// 微信小程序的胶囊的高度
				statusBarHeight: ""
			};
		},
		beforeMount() {
			// #ifdef MP-WEIXIN
			let custom = wx.getMenuButtonBoundingClientRect();
			wx.getSystemInfo({
			    success: res=>{
					console.log(res.statusBarHeight);
					this.statusBarHeight = (res.statusBarHeight + (custom.top - res.statusBarHeight)) * 2 + custom.height;
				}
			});
			// #endif
		},
		created() {
			// 获取当前页面路由标题
			if (this.notitle) {
				this.pageTitle = this.notitle
			} else {
				this.pageTitle = this.$Route.style.navigationBarTitleText;
			}
		},
		methods: {
			headerRightClick() {
				// 组件绑定click事件
				this.$emit("rightClick");
			},
			headerLeftClick() {
				uni.navigateBack({});
				uni.setStorageSync("changeActive", 0)
			},

			// 更换标题
			changeTitle(title) {
				console.log(title);
				this.pageTitle = title;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.Header-box {
		position: relative;
		// 常见样式
		&.common {
			padding-bottom: 100rpx;
			padding-bottom: calc(constant(safe-area-inset-top) + 100rpx);
			padding-bottom: calc(env(safe-area-inset-top) + 100rpx);
			.header-fixed-box {
				height: 100rpx;
				height: calc(constant(safe-area-inset-top) + 100rpx);
				height: calc(env(safe-area-inset-top) + 100rpx);
				.header-main-box {
					height: calc(100rpx - constant(safe-area-inset-top));
					height: calc(100rpx - env(safe-area-inset-top));
					height: 100rpx;
				}
			}
		}
		// 小程序样式
		&.xcx {}
		.header-fixed-box {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 9;
			background: rgba(255, 255, 255, 0);
			.header-main-box {
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				text-align: center;
				color: white;
				.header-title {
					color: #fff;
					width: 70%;
					height: 100%;
					margin: 0 auto;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
				}

				.header-operation {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					width: 15%;
					position: absolute;
					bottom: 0;
					white-space: nowrap;
					color: #333 !important;

					.header-left-back {
						width: 33rpx;
					}

					&.header-left-box {
						left: 0;
					}

					&.header-right-box {
						right: 0;
						width: auto;
					}
				}
			}
		}
	}
</style>

兼容不易，如果好用的话请动动那不会出bug的小手给我点点关注，会不断更新更多有用的组件及技术