JianjianStreet-H5/components/comm-navbar/comm-navbar.vue

<template>
	<view class="comm-navbar position-fixed top-0 w-100  left-0" :style="{background: backgroundColor, zIndex: zIndex}">
		<!-- 状态栏 -->
		<view class="statusBarHeight"></view>
		<view class="navbar flex justify-center align-center">
			<view class="nav-icon">
				<slot></slot>
				<u-icon size="40" v-if="back" class="bakc" :style="{color: textColor}" @click="handleBack" name="arrow-left"></u-icon>
			</view>
			<view class="nav-text" :style="{color: textColor}">{{ text }}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			text: {
				type: String
			},
			textColor: {
				type: String,
				default: '#333'
			},
			backgroundColor: {
				type: String,
				default: 'transparent'
			},
			back: {
				type: Boolean,
				default: false
			},
			backNum: {
				type: Number,
				default: 1
			},
			zIndex: {
				type: [Number, String],
				default: 999
			}
		},
		methods: {
			handleBack () {
				uni.navigateBack({
					delta: this.backNum
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.comm-navbar {z-index: 999;
	.statusBarHeight {width: 100%;height: var(--status-bar-height);}
		.navbar {height: 80rpx;width: 100%;padding: 0 32rpx;}
		.nav-text {font-size: 36rpx;}
		.nav-icon {position: absolute;left: 10rpx;}
		.bakc {font-size: 36rpx}
	}
</style>