微信小程序自定义状态栏的高度设置

    // 获取设备信息
    wx.getSystemInfo({
      success: e => {   // { statusBarHeight: 20, ... }，单位为 px
         // 获取右上角胶囊的位置信息
         let info = wx.getMenuButtonBoundingClientRect()  // { bottom: 58, height: 32, left: 278, right: 365, top: 26, width: 87 }，单位为 px
         let CustomBar = info.bottom + info.top - e.statusBarHeight
      }
    })

自定义导航栏的高度 = 手机状态栏高度 + 胶囊高度 + 胶囊的上下间距

胶囊的上下间距是一致的。
这个间距在不同设备上是不一样的。
上间距 = 胶囊与手机状态栏的距离。
可以通过胶囊信息的 top 值减去手机状态栏的高度，从而得出胶囊的上间距。


webwxgetmsgimg (2).jpg
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容