如下截图，通过 wx.getSystemInfoSync 计算得到的整个导航栏高度，其实是有3个部分的：

• 黄色：状态栏高度，uniapp文档中有给出；
• 红色：胶囊高度，可以计算得出；
• 绿色：绿色是整个导航栏的高度，被黄色和红色盖住了

---

 pages.json 设置自定义导航：

{"path": "pages/mine/index","style": {"navigationBarTitleText": "我的","navigationStyle":"custom" }}

---

一、状态栏高度

uniapp-自定义导航栏使用注意

<template><view><view class="status_bar"><!-- 这里是状态栏 --></view><view> 状态栏下的文字 </view></view>
</template>
<style>.status_bar {height: var(--status-bar-height);width: 100%;}
</style>

 二、整个导航栏高度

let sysInfo = wx.getSystemInfoSync();
let rect = wx.getMenuButtonBoundingClientRect();
let navBarHeight = rect.bottom + 16 / sysInfo.pixelRatio;
// 胶囊位置信息
this.menuButtonRect = JSON.parse(JSON.stringify(rect));
// 自定义导航栏的高度
this.height = navBarHeight;

上述代码中+ 16的原因：胶囊底边的留白高度。

[微信小程序]navigationStyle设置为custom后，自定义导航栏适配不同屏幕 - 董俊辉的前端博客

三、代码

新建一个文件，my-nav.vue

<template><view class="nav-box" :style="{'height':height+'px','background':bgColor}"><!-- 自定义导航栏 --><view class="status_bar" :style="{'height':statusBarHeight+'px'}"><!-- uni-ui这里是状态栏 --></view><!-- 胶囊位置信息 --><view class="nav-main flex align-center justify-center" :style="{height: navBarHeight+'px'}"><view class="nav-main-back" @click="back" v-if="backIcon"><uni-icons type="back" size="26" color="#fff"></uni-icons></view><text class="nav-main-title">{{title}}</text></view></view>
</template><script>export default {props:{bgColor: {type:String,default: "#F5F5F5"},backIcon: {type: Boolean, default: true},title: {type:String,default:"二维码仓储积分"}},data() {return {//总高度height: 0,//胶囊位置信息menuButtonRect: {},//状态栏的高度statusBarHeight: 0 ,//导航栏的高度navBarHeight: 0}},created() {// this.height = wx.getStorageSync('navBarHeight')this.getHeight();},methods: {      //获取屏幕导航栏高度getHeight(){if (wx.canIUse('getMenuButtonBoundingClientRect')) {let sysInfo = wx.getSystemInfoSync(); //状态栏的高度this.statusBarHeight = sysInfo.statusBarHeight;// 胶囊位置信息let rect = wx.getMenuButtonBoundingClientRect();this.menuButtonRect = JSON.parse(JSON.stringify(rect));// 导航栏高度let navBarHeight = (rect.top-sysInfo.statusBarHeight)*2+rect.height;this.navBarHeight = navBarHeight;// 自定义导航栏的高度this.height = sysInfo.statusBarHeight + navBarHeight;} else {wx.showToast({title: '您的微信版本过低，界面可能会显示不正常',icon: 'none',duration: 4000});}},//返回back() {uni.navigateBack({delta: 1})},}}
</script><style lang="scss" scoped>
.status_bar {// height: var(--status-bar-height);width: 100%;// background:#ff0;}.nav-main{position: relative;// background:#f00;.nav-main-back{position: absolute;left: 10rpx;}.nav-main-title{color:#fff;font-size:16px;}}
</style>

• 这里注释掉了 原来的 status_bar 的高度，uniapp 计算出来有误差。

使用：

<MyNav title="我的" bgColor="" :backIcon="false"></MyNav>import MyNav from "@/components/my-navbar.vue"
components: {MyNav},

效果：

 

也有其他计算导航栏高度的：uniapp 计算自定义导航栏高度_菜鸟驿站2020的博客-CSDN博客_uniapp导航栏高度