封装uniapp获取设备导航栏高度

<template>
	<view>
		<view :style="customBar"></view>
	</view>
</template>

<script>
	export default {
		name: 'getSystemInfo',
		data() {
			return {
				customBar: ""
			}
		},
		created() {
			this.getSyc()
		},
		props:['BacKColor'],
		
		watch:{
			BacKColor(dev){
				// console.log(dev)
				this.getSyc()
			}
		},
		
		methods: {
			getSyc() {
				uni.getSystemInfo({
					success: (e) => {
						let statusBar = 0 //状态栏高度
						let customBar = 0 // 状态栏高度 + 导航栏高度  
						let navbar = 0 // 自定义标题与胶囊对齐高度
						// #ifdef MP
						statusBar = e.statusBarHeight
						customBar = e.statusBarHeight + 45
						if (e.platform === 'android') {
							this.$store.commit('SET_SYSTEM_IOSANDROID', false)
							customBar = e.statusBarHeight + 50
						}
						// #endif

						// #ifdef MP-WEIXIN
						statusBar = e.statusBarHeight
						const custom = wx.getMenuButtonBoundingClientRect()
						customBar = custom.bottom + custom.top - e.statusBarHeight

						navbar = (custom.top - e.statusBarHeight) * 2 + custom.height
						// #endif

						// #ifdef MP-ALIPAY
						statusBar = e.statusBarHeight
						customBar = e.statusBarHeight + e.titleBarHeight
						// #endif

						// #ifdef APP-PLUS
						// console.log('app-plus', e)
						statusBar = e.statusBarHeight
						customBar = e.statusBarHeight + 45
						// #endif

						// #ifdef H5
						statusBar = 0
						customBar = e.statusBarHeight + 45
						// #endif

						this.customBar = 'height:' + statusBar + 'px' +';' + `background-color: rgb(  ${this.BacKColor} );`
					}
				})
			}
		}
	}
</script>

<style scoped>
	/* .customBar {
		background-color: rgb(255, 181, 201);
	} */
</style>

main.js 中引入并挂在全局

 页面 使用：