在微信小程序自定义顶部导航栏，需要设置导航栏的高度，和页面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
},