<!-- 顶部导航栏 -->
<template>
	<view>
		<block v-if="!onlyShowStatusBar">
			<image :src="imgSrc" v-if="imgSrc" class="bg-img" mode="widthFix"></image>
			<view class="title-bar-appbar" :class="isFix ? '' : 'flx'" :style="{ 'padding-top': calculateStatusBar, background: bgColor ? bgColor : '#FFF' }">
				<view class="top-box" :style="{ 'min-height': `${height}rpx` }">
					<view class="top-module left-the">
						<image class="back-button" src="./back-icon.png" @tap="backPage" mode="aspectFit" v-if="isBack"></image>
						<slot name="left-slot"></slot>
					</view>
					<view class="top-module center-the"><slot name="center-slot"></slot></view>
					<view class="top-module right-the"><slot name="right-slot"></slot></view>
				</view>
			</view>
			<view class="title-bar-placeholder" :style="{ height: calculateHeight }" v-if="!isFix"></view>
		</block>
		<view v-else style="width: 750rpx;" :style="{ height: calculateStatusBar }"></view>
	</view>
</template>

<script>
/**
 *
 * @description 顶部导航栏
 * slot:
 * 		left-slot:左侧插槽
 * 		center-solt:中间插槽
 * 		right-solt:右侧插槽
 * @property {String} 			bgColor				顶部导航栏颜色;默认值：#FFF
 * @property {String, Boolean} 	isBack				是否显示返回;默认值：true
 * @property {String, Boolean} 	isBackFunction		左侧插槽是否绑定返回事件;默认值：true
 * @property {String, Boolean} 	isFix				是否固定在顶部，不悬浮;默认值：true
 * @property {String} 			imgSrc				导航栏背景图;默认值：空
 * @property {String, Boolean}  onlyShowStatusBar 	是否仅占位状态栏	默认值：false
 * @property {Number}  			height 				状态栏高度，单位Rrpx	默认值：88
 * @example
 * <top-navigation :isBack="true" :bgColor="themeColors.white"><template #center-slot><view class="mine-name">信息</view></template></top-navigation>
 *   */

export default {
	name: 'top-navigation',
	data() {
		return {};
	},
	props: {
		bgColor: {
			type: String,
			default: 'transparent'
		},
		isBack: {
			type: [Boolean, String],
			default: true
		},
		isBackFunction: {
			type: [Boolean, String],
			default: true
		},
		isFix: {
			type: [Boolean, String],
			default: false
		},
		imgSrc: {
			type: String,
			default: ''
		},
		onlyShowStatusBar: {
			type: [Boolean, String],
			default: false
		},
		height: {
			type: [Number],
			default: 88
		}
	},
	computed: {
		calculateHeight() {
			return `calc(${this.statusHeight}px + ${this.height}rpx)`;
		},
		calculateStatusBar() {
			return `${this.statusHeight}px`;
		}
	},
	methods: {
		backPage() {
			if (!this.isBackFunction) return;
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.title-bar {
	width: 750rpx;
	height: auto;
	position: relative;
}
.title-bar-appbar {
	@extend .title-bar;
	z-index: 2;
}
.title-bar-placeholder {
	@extend .title-bar;
	z-index: 1;
}
.top-box {
	height: auto;
	min-height: 88rpx;
	width: 750rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 30rpx;
	box-sizing: border-box;

	.back-button {
		width: 35rpx;
		height: 35rpx;
		margin-right: 28rpx;
	}
	.top-module {
		min-width: 50rpx;
		width: auto;
		display: flex;
		align-items: center;
		font-size: 36rpx;
		font-weight: 500;
	}
	.left-the {
		justify-content: flex-start;
	}
	.right-the {
		justify-content: flex-end;
	}
	.center-the {
		justify-content: center;
		font-weight: 550;
		font-size: 30rpx;
	}
}
.flx {
	position: fixed;
	top: 0rpx;
}
.bg-img {
	width: 750rpx;
	position: absolute;
	top: 0rpx;
	z-index: 1;
}
</style>

同时还需要在App.vue中实现在Vue原型链中放入状态栏高度

import Vue from 'vue';
export default {
	onLaunch: function() {
		uni.getSystemInfo({
			success: e => {
				Vue.prototype.statusHeight = e.statusBarHeight;
				Vue.prototype.screenHeight = e.screenHeight;
				Vue.prototype.screenWidth = e.screenWidth;
				Vue.prototype.platform = e.platform;
			}
		});
	}
};