WeChatアプレットの上部のナビゲーションバーをカスタマイズするには、ナビゲーションバーの高さと、ページ本文の上部のマージンの値を設定する必要があります。これら2つの値に矛盾がある場合は、ページのコンテンツが表示されます。不完全であるか、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のデータ
globalData: {
navHeight: 0
},