aircraft-pilot/components/topnav/index.vue

<template>
	<view>
		<view class="nav-top" :style="{ height: CustomBar+'px',
			background: topLevel===0? '#ffffff00' : `rgba(255, 255, 255,${topLevel})` }">
			<view class="nav-content" :style="{ paddingTop: StatusBar+'px' }">
				<u-icon v-if="showBack" name="arrow-left" size="36" @click="back"
				:color="topLevel===0? defaultBackColor : `rgba(51, 51, 51,${topLevel})`"></u-icon>
				<view style="width: 35rpx;height: 35rpx;" v-else />
				<text :style="{ color: topLevel===0? defaultNavTextColor : `rgba(51, 51, 51,${topLevel})` }">{{ title }}</text>
				<view style="width: 35rpx;height: 35rpx;" />
			</view>
		</view>
		<view v-if="!fixed" :style="{height: CustomBar+'px'}" />
	</view>
</template>

<script>
export default {
	// #ifdef MP
	options: {
		styleIsolation: 'shared'
	},
	// #endif
	props:{
		topLevel:{
			type: Number,
			default: 0
		},
		title:{
			type: String,
			default: '标题'
		},
		showBack:{
			type: Boolean,
			default: false
		},
		// 初始返回按钮颜色
		defaultBackColor:{
			type: String,
			default: '#ffffff00'
		},
		// 初始标题颜色
		defaultNavTextColor:{
			type: String,
			default: '#ffffff00'
		},
		// 是否fixed，决定是否有留空
		fixed:{
			type: Boolean,
			default: true
		}
	},
	data(){
		return {
			// #ifdef MP
			// 微信小程序自定义导航栏参数
			StatusBar: this.StatusBar || 0,
			CustomBar: this.CustomBar || 0
			// #endif
		}
	},
	methods:{
		// 返回
		back(){
			uni.navigateBack();
		},
	}
}
</script>

<style scoped lang="scss">
.nav-top{
	position: fixed;
	width: 100%;
	top: 0;
	background-color: aliceblue;
	display: flex;
	align-items: center;
	z-index: 100;
	.nav-content{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		width: 100%;
		text{
			font-family: Source Han Sans SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #333333;
		}
	}
}
</style>