小程序支持自定义导航栏，首先要读取手机状态栏的高度，在app.js中读取
wx.getSystemInfo({
success: (res) => {
console.log(`res.statusBarHeight`, res.statusBarHeight);
this.globalData.height = res.statusBarHeight
}
})
下面是导航栏组件的wxml代码
<view class="nav-box" style='height:{{navHeight + statusBarHeight}}px'>
<view class='nav-content' style='height:{{navHeight}}px;top:{{statusBarHeight}}px'>
<view class='nav-content-commom'>我是按钮</view>
<view>我是标题</view>
<!-- 最后一个div是为了实现css居中效果 -->
<view class='nav-content-commom'></view>
</view>
</view>
下面是组件的wxss代码：
.nav-box{
position: fixed;
top: 0;
left: 0;
background:red;
width: 100%;
height: 90px;
z-index: 999;
}
.nav-content{
position: absolute;
top: 20px;
width: 100%;
background: #000;
height: 46px;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
font-size: 36rpx;
font-weight: 600;
}
.nav-content-commom{
width: 100px;
}
最后附上业务逻辑：
var app = getApp();
Component({
properties: {
},
data: {
statusBarHeight: app.globalData.height,
navHeight: 46,
},
methods: {
}
})
组件很简单，自定义导航栏的高度大小，我定义为46像素，背景颜色和标题文案自行修改。
