微信小程序自定义顶部导航栏防止出现内容显示不全和出现空白

在微信小程序自定义顶部导航栏，需要设置导航栏的高度，和页面body的margin-top的值，如果这两个值不一致，都会导致页面的内容显示不全或者margin-top的值太大导致有空白。

为了解决这个问题，可以通过动态获取手机的状态栏高度

<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 })

在app.js的onLaunch

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

在app.js的data

globalData: {   navHeight: 0 },