如下截图,通过 wx.getSystemInfoSync 计算得到的整个导航栏高度,其实是有3个部分的:
- 黄色:状态栏高度,uniapp文档中有给出;
- 红色:胶囊高度,可以计算得出;
- 绿色:绿色是整个导航栏的高度,被黄色和红色盖住了
pages.json 设置自定义导航:
{
"path": "pages/mine/index",
"style": {
"navigationBarTitleText": "我的",
"navigationStyle":"custom"
}
}
一、状态栏高度
<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的原因:胶囊底边的留白高度。
三、代码
新建一个文件,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导航栏高度