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

最新推荐文章于 2024-07-30 13:02:28 发布

苏喂苏喂苏喂su

最新推荐文章于 2024-07-30 13:02:28 发布

阅读量6.5k

点赞数 2

分类专栏：微信小程序

本文链接：https://blog.csdn.net/joyvonlee/article/details/104032204

版权

微信小程序专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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