const SYSTEM_INFO = uni.getSystemInfoSync();
//获取手机状态栏高度
export const getStatusBarHeight = () => SYSTEM_INFO.statusBarHeight || 15;
//获取微信小程序导航栏高度
export const getTitleBarHeight = () => {
if (uni.getMenuButtonBoundingClientRect) {
let {
top,
height
} = uni.getMenuButtonBoundingClientRect();
return height + (top - getStatusBarHeight()) * 2;
} else {
return 40;
}
};
//获取手机状态栏高度+微信小程序导航栏高度
export const getNavBarHeight = () => getStatusBarHeight() + getTitleBarHeight();
<template>
<view class="container">
<view :style="{height:getStatusBarHeight() +'px',backgroundColor:'green'}"></view>
<view :style="{height:getTitleBarHeight() +'px',backgroundColor:'gold'}"></view>
<view :style="{height:getNavBarHeight() +'px',backgroundColor:'red'}"></view>
</view>
</template>
<script setup>
import {
getStatusBarHeight,
getTitleBarHeight,
getNavBarHeight,
} from '@/utils/system.js';
</script>
<style lang="scss" scoped>
.container {
view {
width: 500rpx;
}
}
</style>