uniapp 自定义头部导航

html
引用需要自行更改图片路径

	<view class="bac-box"></view>
		<!-- 自定义导航栏 -->
		<view class="navigation-box">
			<!-- 返回键 -->
			<view class="back_but" @tap="back">
				<image src="../../static/shopping/back.png" style="width: 40upx;height: 40upx;" mode=""></image>
			</view>
			<!-- 标题 -->
			<view class="title">
				详情
			</view>
			<!-- 右侧符号 -->
			<view class="right-biao">
				<image src="../../static/topic/diandiandian.png" style="width: 56upx;height: 18upx;" mode=""></image>
			</view>
		</view>

css代码

	.bac-box {
			position: fixed;
			top: 0;
			width: 100%;
			// background: linear-gradient(90deg, #FC552E 0%, #FA2E1A 100%); //渐变色的背景
			background-color: #FFFFFF;
			height: 70upx;
			z-index: 1001;
		}

		//自定义导航栏
		.navigation-box {
			position: fixed;
			top: 70upx;
			height: 93upx;
			background-color: #FFFFFF;
			width: 100%;
			z-index: 100;
			border-bottom: 1rpx solid #EEEEEE;
			display: flex;
			justify-content: space-between;
			padding: 0upx 32upx;
			align-items: center;

			//返回按钮
			.back_but {
				width: 40upx;
				height: 40upx;
			}

			//标题
			.title {
				font-size: 36upx;
				color: #333333;
				font-weight: 500;
			}
			//右侧小标
			.right-biao{
				width: 56upx;
				height: 18upx;
			}
		}

返回事件

//返回上一级
			back() {
				uni.navigateBack({
					delta: 1
				});
			},