uniapp封装了个简单的导航栏

没有做的很华丽，业务正好有需要


代码：

<template>
	<view class="navbar">
		<view class="navbar-content" :style="{background:color}">
			<image v-if="!isBlack" @click="backBtn" src="" mode="aspectFit"></image>
			<image v-if="isBlack" @click="backBtn" src="" mode="aspectFit"></image>
			<view :style="{color:fontcolor}">{{titleText}}</view>
			<view class="placeholder-view"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		props: {
			titleText: {//导航栏标题
				type: String,
				default: ''
			},
			isBlack: {//商品详情设置为true
				type: Boolean,
				default: false
			},
			color: {//背景色
				type: String,
				default: '#F5F7F7'
			},
			fontcolor: {//标题文字颜色
				type: String,
				default: '#282c2c'
			}
		},
		methods: {
			backBtn() {
				this.$emit('backBtn');
			}
		}
	}
</script>

<style lang="scss">
	.navbar {
		position: fixed;
		top: 0;
		z-index: 9999;
		width: 100%;
		height: 90rpx;
		.navbar-content {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			image {
				width: 40rpx;
				height: 40rpx;
			}
			view {
				font-size: 36rpx;
				text-align: center;
			}
			.placeholder-view{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>