uniapp自定义导航栏

APP中与微信小程序中使用的API不一样，下面就分别介绍一下使用方法

微信小程序

getMenuButtonBoundingClientRect()
官方解说：在小程序平台，如果原生导航栏被隐藏，仍然在右上角会有一个悬浮按钮，微信下也被称为胶囊按钮。本API用于获取小程序下该菜单按钮的布局位置信息，方便开发者布局顶部内容时避开该按钮。

APP

uni.getSystemInfo(OBJECT)
获取系统消息
可以使用下面这个变量来获取状态栏高度

使用方法

<template>
	<view class="content">
		<view style="background-color: red;" :style="{height:heightOne+'px'}">1</view>
		<view style="background-color: yellow;" :style="{height:heightTwo+'px'}">2</view>
		<view style="background-color: blue;" :style="{height:heightThree+'px'}">3</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				heightOne:0,
				heightTwo:0,
				heightThree:0,
			}
		},
		onReady(){
			const self = this;
			
			// #ifdef MP-WEIXIN
			self.heightOne = uni.getMenuButtonBoundingClientRect().top;//头部高度
			self.heightTwo = uni.getMenuButtonBoundingClientRect().height;//标题高度
			self.heightThree = uni.getMenuButtonBoundingClientRect().bottom;//头部加标题高度
			// #endif
			
			// #ifdef APP-PLUS
			
			// 异步方式
			uni.getSystemInfo({
			    success: function (res) {
					self.heightOne = res.statusBarHeight;
					self.heightTwo = res.statusBarHeight;
					self.heightThree = res.statusBarHeight;
					console.log(res.safeArea)
			    }
			});
			
			//同步方式
			// self.heightOne.uni.getSystemInfoSync().statusBarHeight
			// self.heightTwo.uni.getSystemInfoSync().statusBarHeight
			// self.heightThree.uni.getSystemInfoSync().statusBarHeight
			
			// #endif
			
		},
		onLoad(){
			
		},
		onShow() {
			
		},
		methods:{
			
		}
	}
</script>
<style>
	
</style>

IOS模拟器效果

微信小程序开发工具效果

安装真机APP效果(为了看效果，我用电脑反向拍照的)

安卓真机小程序效果(为了看效果，我用电脑反向拍照的)