uniapp模拟导航栏，自定义导航栏的使用

需求

在做uniAPP的时候，官方的导航栏不满足设计页面的需求，需要自定义才可以实现，于是就把原生的导航栏隐藏掉，自己来写导航栏来实现设计的自定义。

隐藏原生导航

只用个别的页面才需要自定义导航，所以我只在局部页面进行隐藏

局部页面隐藏

在page页面pages属性中style里添加

“navigationStyle”:“custom”

"pages": [
	{
		"path": "pages/index/index",
		"style": {
			//...
			"navigationBarTitleText": "首页",
			"navigationStyle":"custom"
			//...
		}
	}
],

全局页面隐藏（一般用不到）

在page页面globalStyle属性中添加

“navigationStyle”:“custom”

"globalStyle": {
		//...
		"navigationStyle":"custom"
		//...
	}

使用：页面结构与样式

可以直接通过样式来获取状态栏的高度

height:var(–status-bar-height);

也可以通过js的方法来获取设备的状态栏高度(需要加载页面的时候获取并赋值)

this.statusBarHeight = uni.getSystemInfoSync()[‘statusBarHeight’];

<view class="status-contents">
			<!-- 如果使用js的方法获取状态栏高度，使用一下的内容 -->
			<!-- <view class="status" :style="{ paddingTop: statusBarHeight + 'px' }"></view> -->
			<!-- 状态栏占位 -->
		    <view class="status top-view"></view>  
		    <!-- 导航栏 -->
		    <view class="title" style="height: 88rpx;">
		    	<!-- 导航栏左边 -->
				<view class="left">
					<image src="../../static/logo.png" mode=""></image>
					<text>我是导航栏左边</text>
				</view>
				<!-- 导航栏右边：注意小程序的情况下样式需要调整 -->
				<view class="right">
					我是右边
				</view>
		    </view>
		</view>

// 可以不用，直接使用css的方法获取状态栏的高度进行配置
<script>
	export default {
		data() {
			return {
				title: '我是首页',
				statusBarHeight:0,//状态栏高度
			}
		},
		onLoad() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		methods: {
			
		}
	}
</script>

注意： 小程序右上角有胶囊，配置样式的时候要避免和胶囊重叠
注释编译：

/* #ifdef MP-WEIXIN /
.right{
margin-right: 106px;
}
/ #endif */

<style lang="scss">
/*  css样式  */
.status-contents{  
	       height: calc(var(--status-bar-height) + 88rpx);  
	   }  
	.top-view{  
	      width: 100%;  
	      position: fixed;  
		  z-index: 999;
		  background-color: #FFFFFF;
	      top:0;  
	}  
	.status{  
	      height:var(--status-bar-height);  
	}
	.title{
	     width: 100%;  
	     position: fixed;  
	     top: var(--status-bar-height);  
		 z-index: 999;
		 line-height: 88rpx;
		 background-color: #FFFFFF;
		 vertical-align: sub;
		 display: flex;
		 justify-content: space-between;
		 .left{
			 margin-left: 20rpx;
		 }
		 /*  #ifdef  MP-WEIXIN  */
		 .right{
			 margin-right: 106px;
		 }
		 /*  #endif  */
		 image{
			 width: 48rpx;
			 height: 48rpx;
			 vertical-align: sub;
			 
		 }
	}

</style>