uni 小程序头部，导航栏自定义封装。

<template>
	<!-- 封装头部 -->
	<view class="header"
		:style="' background:url('+url+');'+'background-repeat: no-repeat;background-size: cover;'+'background-color:'+backgroundcColor+';position:'+position +';'">
		<!-- 状态栏高度 -->
		<view :style="'height:'+BarHeight+'px;'"></view>
		<!-- 导航栏 -->
		<view class="navigationBar" :style="'height:'+customBarHeight+'px;'" v-if="platform=='android'">
			<image class="imageA" :style="'margin-left:'+Margins+'px;'"
				v-if="isBlack && pageslogo[pageslogo.length - 2]" @click="toBlcak"
				src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/diedai/titlejiantou.png" mode="aspectFit"></image>

			<image class="imageA" :style="'margin-left:'+Margins+'px;'"
				v-if="isBlack && !pageslogo[pageslogo.length - 2]" @click="toBlcak"
				src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/diedai/shop_home.png" mode="widthFix"></image>

			<view class="title" :style="isBlack ? 'margin-left:'+Margins+'px;' : 'margin-left: 30rpx;'">
				<!-- +'font-size:'+fontSize+'px' -->
				{{title}}
			</view>
		</view>
		<view class="navigationBar2" :style="'height:'+customBarHeight+'px;'" v-else>
			<image class="imageA2" :style="'left:'+Margins+'px;'" v-if="isBlack && pageslogo[pageslogo.length - 2]"
				@click="toBlcak" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/diedai/titlejiantou.png"
				mode="aspectFit"></image>
			<image class="imageA2" :style="'left:'+Margins+'px;'" v-if="isBlack && !pageslogo[pageslogo.length - 2]"
				@click="toBlcak" src="https://ykp-new.oss-cn-hangzhou.aliyuncs.com/diedai/shop_home.png"
				mode="widthFix"></image>
			<!-- :style="'font-size:'+fontSize+'px'" -->
			<view class="title2">
				{{title}}
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		// isBlack返回
		// url 图片路径
		// title:标题
		// backgroundcColor ：背景色
		// position：定位需求

		// 仅适用于wx小程序如需其他才考文档
		// https://blog.csdn.net/weixin_44510655/article/details/127131947
		// APP.vue中的代码
		// #ifdef MP-WEIXIN
		// let statusBar = 0 //状态栏高度
		// let customBar = 0 // 导航栏高度  
		// let navbar = 0 // 自定义标题与胶囊对齐高度
		// let Margins=0
		// uni.getSystemInfo({
		// 	success: (e) => {
		// 		console.log(e);
		// 		statusBar = e.statusBarHeight
		// 		const custom = wx.getMenuButtonBoundingClientRect()
		// 		console.log(custom);
		// 		customBar  = custom.bottom + custom.top - e.statusBarHeight
		// 		navbar = (custom.top - e.statusBarHeight) * 2 + custom.height
		// 		// 胶囊边距
		// 		Margins =e.screenWidth-custom.right
		// 		console.log(Margins);
		// 		uni.setStorageSync('customBarHeight', customBar)
		// 		uni.setStorageSync('Margins', Margins)
		// 	}
		// })
		// #endif

		props: ["isBlack", "url", "title", 'backgroundcColor', 'position', 'specialBlack'],
		data() {
			return {
				//获取状态栏高度
				BarHeight: uni.getSystemInfoSync().statusBarHeight,
				//在app.vue中先获取导航栏和状态栏高度，然后再减去状态栏高度
				customBarHeight: uni.getStorageSync('customBarHeight') - uni.getSystemInfoSync().statusBarHeight,
				Margins: uni.getStorageSync('Margins'),
				platform: uni.getSystemInfoSync().platform,
				//系统字体大小
				fontSize: wx.getSystemInfoSync().fontSizeSetting,
				// console.log('android'); 靠右对齐
				// console.log('ios'); 其他的和ios都居中
				//判断图标显示问题
				pageslogo: getCurrentPages()
			};
		},
		onLoad() {
			//ui需求有的需要透明有的不需要
			this.position = this.position ? this.position : 'sticky'
		},
		methods: {
			toBlcak() {
				if (this.specialBlack === 6) {
					uni.redirectTo({
						url: '/pageL/teamShop/teamShop'
					});
					return
				}
				var pages = getCurrentPages();
				console.log(pages);
				let prevPage = pages[pages.length - 2];
				if (prevPage) {
					//start 商城界面bug解决
					var num = pages.length
					var backnum = 1
					for (var i = 0; i < num; i++) {
						if (pages[i].route == 'pageL/teamShop/teamShop') {
							backnum++
						}
					}
					console.log(backnum);
					if (backnum > 2) {
						uni.navigateBack({
							delta: backnum
						})
						return
					}
					//end
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: "/pages/index/index"
					})
				}

			},
		}
	};
</script>

<style scoped lang="less">
	.header {
		position: sticky;
		top: 0rpx; //距离为0的时候吸顶
		z-index: 99999;
		width: 100%;
		opacity: 1;

		.navigationBar {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.imageA {
				height: 30rpx;
				width: 40rpx;
			}

			.title {
				font-size: 36rpx;
				color: #000000;
			}
		}

		.navigationBar2 {
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;

			.imageA2 {
				position: absolute;
				height: 30rpx;
				width: 40rpx;
			}

			.title2 {
				font-size: 38rpx;
				font-weight: 800;
				color: #000000;
			}
		}
	}
</style>