先上效果图 写的比较难看第一次写，自己记录过程。

uniApp要自定义导航栏需要在page.json文件中将对应你需要自定义导航栏的页面进行配置

"pages": [{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false, //禁止下拉刷新
				"navigationStyle":"custom"
			}

		}, 
]

比如我这里将 navigationStyle 改为 custom 这样uni自带的导航栏就会消失 就可以在页面上写自定义的导航栏了


<template>
	<!-- 顶部导航栏 -->
	<view :style="{backgroundColor:Fstyle.BoxBgColor}" class="top-header-bar">
		<!-- 左侧输入框及搜索框 -->
		<view :style="{top:Fstyle.top,left:Fstyle.left,backgroundColor:Fstyle.leftBoxBgColor}" class="left-box">
			<view class="left-flex-box">
				<view :style="{color:Fstyle.CityColor}" class="left-city-name" @click="jumpCityCheck">{{cityName}}
				</view>
				<view class="icon-down">
					<image class="imageWh" :src="Fstyle.DownIcon"></image>
				</view>
				<!-- 线 -->
				<view class="line-row" :style="{backgroundColor:Fstyle.lineBg}"></view>
			</view>
			<!-- 搜索框 -->
			<view class="search-box">
				<view class="input-Search-icon">
					<image class="imageWh" :src="Fstyle.searchIcon"></image>
				</view>
				<input :class="{placeHoladerColor:Fstyle.placeHoladerColor}" class="input-font-size" disabled="true"
					placeholder="输入商户名、地址或商品" value="" />
			</view>
		</view>
	</view>
</template>

Css 

<style lang="less">
	.top-header-bar {
		position: fixed;
		z-index: 100;
		width: 100%;
		height: 130rpx;

		.left-box {
			position: fixed;
			display: flex;
			width: 518rpx;
			height: 64rpx;
			border: 1rpx solid #EAEAEA;
			box-shadow: 0rpx 2rpx 16rpx 0px rgba(255, 255, 255, 0.5);
			border-radius: 31rpx;
		}

		.left-flex-box {
			display: flex;
			padding: 0 20rpx;
		}

		.left-city-name {
			white-space: nowrap;
			font-size: 26rpx;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 38rpx;
			text-shadow: 0px 2rpx 40rpx rgba(0, 0, 0, 0.3);
			display: flex;
			align-items: center;
		}

		.icon-down {
			width: 30rpx;
			height: 30rpx;
			border-radius: 2px;
			margin-top: 20rpx;
			margin-left: 5rpx;
		}

		.line-row {
			display: flex;
			align-items: center;
			width: 1rpx;
			height: 52rpx;
			background-color: #FFFFFF;
			margin-top: 6rpx;
			margin-left: 10rpx;
		}

		.search-box {
			display: flex;
			align-items: center;
		}

		.input-Search-icon {
			width: 26rpx;
			height: 26rpx;
			margin-right: 10rpx;
		}

		.input-font-size {
			font-size: 20rpx;
			color: black;
		}

		.placeHoladerColor {
			.uni-input-placeholder {
				color: #a8a8a8a8;
				font-weight: 500;
			}
		}

		.uni-input-placeholder {
			color: #FFFFFF;
			font-weight: 500;
		}
	}
</style>



我的导航栏写好之后，我是用父组件去传递参数控制他在页面的高度，因为每个机型状态栏的高度可能不一样，所以fixed定位不能写死。

我是用传参的方式去控制他的高度 ，uniApp自带一个api可以查询到胶囊的高度 我们只需要让我们导航栏的Top和胶囊一样就可以完美适配了。



//用于控制顶部搜索栏的颜色参数
				ScrollObjStyle: {
					BoxBgColor: 'rgba(255,255,255,0)', //开始时透明色
					top: '48rpx', //子元素位移值 后续可能要根据不同设备进行匹配暂定小程序适配
					left: '29rpx', //同上
					CityColor: '#ffffff', //城市颜色 ,
					leftBoxBgColor: 'rgba(240, 240, 240,.3)', //输入框盒子的颜色'
					placeHoladerColor: false, //控制切换placeHolder的文字颜色
					searchIcon: '../../static/tabBar/whiteSearch.png', //搜索框的图片切换
					DownIcon: '../../static/tabBar/whiteIconDown.png',
					lineBg: '#ffffff', //线条颜色
				},


这个top 就是导航栏的高度 默认值  一会儿我们每次进入时 检测是wx小程序，就直接调用方法修改他即可。

getCapsule() {
				//获取胶囊位置并改变顶部自定义导航栏的位置
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				console.log(menuButtonInfo, '胶囊top位置')
				//让自定义导航栏头部组件始终和胶囊对齐 做到兼容各手机型号
				this.ScrollObjStyle.top = menuButtonInfo.top+'px';
			},


这样就好了，效果就和图片那样进行对齐了。