uniapp 微信小程序自定义导航栏（拿来即用）

html部分

		<view class="header-fixed">
			<!-- 状态栏占位 -->
			<view class="status_bar" :style="'height:' + tophight.top + 'px;'"></view>
			<!-- 导航栏文字 -->
			<view class="navs-view">
				<view class="navs-image" :style=" 'height:' + tophight.height + 'px;' " @click="back()">
					<image src="/static/navbar/fanhuihei.png" mode="widthFix" class="image"></image>
				</view>
				<view class="navs">
					<view class="navs-nav" :style=" 'height:' + tophight.height + 'px;' + 'line-height:' + tophight.height + 'px;' ">“0享”购车</view>
				</view>
				<view style="width: 20px; padding-right: 20rpx;"></view>
			</view>
		</view>
		<!-- 占位用 -->
		<view>
			<view class="status_bar" :style="'height:' + tophight.top + 'px;'"></view>
			<view :style=" 'height:' + tophight.height + 'px;width:100%;' "></view>
		</view>

js部分

		data() {
			return {
				tophight:{},
			}
		},
		onLoad() {
			this.tophight = uni.getMenuButtonBoundingClientRect()
		},

css部分

		.header-fixed {
			background-color: #1E1F24;
			padding: 0;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 2;
			.status_bar {
				width: 100%;
			}
			.navs-view {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				.navs-image {
					display: flex;
					align-items: center;
				}
				.image {
					width: 22px;
					height: 22px;
					border-radius: 50%;
				}
				.navs {
					display: flex;
					justify-content: flex-start;
					align-self: center;
				}
				.navs-nav {
					padding-left: 20rpx;
					width: 100%;
					text-align: center;
					color: #fff;
					font-size: 14px;
				}
			}
		}

返回按钮图片