uniapp-自定义顶部导航栏

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

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

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

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

<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()
			},
	},

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