medicine-xcx/components/comm-navbar/comm-navbar.vue

<template>
	<view class="comm-navbar position-fixed top-0 vw-100" :style="{background: backgroundColor}">
		<!-- 状态栏 -->
		<view class="status-bar-height"></view>
		<view class="navbar flex justify-center align-center">
			<view class="nav-icon">
				<slot></slot>
				<u-icon 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
			}
		},
		methods: {
			handleBack () {
				uni.navigateBack({
					delta: this.backNum
				})
			}
		}
		
	}
</script>

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