WeChat applet customizes the top navigation bar to prevent incomplete content display and blank space

To customize the top navigation bar in the WeChat applet, you need to set the height of the navigation bar and the value of margin-top of the page body. If these two values ​​are inconsistent, the content of the page will be displayed incompletely or the value of margin-top will be too large. There are gaps.

In order to solve this problem, you can dynamically obtain the height of the status bar of the phone

<view class='nav bg-white' style='height:{
   
   {navH}}px'>
  <view class='nav-title'>
    首页
  </view>
</view>

.nav{
  width: 100%;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
}
.nav-title{
  width: 100%;
  height: 45px;
  line-height: 45px;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  font-family:PingFang-SC-Medium;
  font-size:36rpx;
  letter-spacing:2px;
}
.bg-white{
  background-color: #ffffff;
}

this.setData({
    navH: App.globalData.navHeight
})

OnLaunch in app.js

wx.getSystemInfo({
  success: res => {
    //导航高度
    this.globalData.navHeight = res.statusBarHeight + 46;
    console.log(this.globalData.navHeight, 'this.globalData.navHeight')
  }, fail(err) {
    console.log(err);
  }
})

Data in app.js

globalData: {
  navHeight: 0
},