uniapp原生顶部导航栏 有时候不满足需求，就需要自定义顶部导航栏

1.在page.json中修改配置，在需要自定义导航栏的页面page配置中修改如下

//page.json
{
			"path": "pages/projectDetail/index",
			"style": {
				"navigationStyle":"custom" //default是默认uniapp原生的顶部导航栏
			}
		}

2.然后在该vue页面中就可以自定义导航栏样式了，根据自己的需求，也可以封装成组件多个地方复用

微信小程序中自定义顶部导航栏需要注意系统最顶部的状态栏高度和胶囊宽高度，ios和安卓的不一样

<view class="nav-style" :style="{'height':navHeight+'px','padding-top':statusBarHeight+'px'}" v-if="showNav" @click="back">
				<image src="../../static/back.png" mode=""></image>
				<view class="top-tl">
					文章标题
				</view>
</view>


<style lang="scss">
// 导航返回
	.nav-style {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		z-index: 1000;
		opacity: 0;
		background-color: #FFFFFF;
		display: flex;
		padding-left: 20rpx;
		align-items: center;
		//导航标题
		.top-tl {
			width: 400rpx;
			margin-left: 20rpx;
			font-size: 40rpx;
			color: #000;
			font-weight: 600;
			overflow: hidden;
			/*超出部分隐藏*/
			white-space: nowrap;
			/*不换行*/
			text-overflow: ellipsis;
			/*超出部分文字以...显示*/
		}
	}
</style>

data() {
			return {
				navHeight: '', //整体顶部导航栏的高度
				statusBarHeight:'',//状态栏高度
			}
		},
onLoad() {
			//获取手机系统的信息（在这主要是获取状态栏和胶囊的高度）
			let {statusBarHeight,system} = uni.getSystemInfoSync()
			this.statusBarHeight = statusBarHeight
			this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 44 : 48)
			console.log(this.navHeight,this.statusBarHeight)
		},
methods:{
		//返回上一层页面
		back(){
				uni.navigateBack()
			},
	},

简单的自定义导航栏就完成了，有需求的也可以封装更丰富的样式，比如说可以有搜索框的等等