美文网首页
微信小程序自定义状态栏的高度设置

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

作者: 321_b7b3 | 来源:发表于2019-07-30 17:01 被阅读0次
        // 获取设备信息
        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

    相关文章

      网友评论

          本文标题:微信小程序自定义状态栏的高度设置

          本文链接:https://www.haomeiwen.com/subject/hownrctx.html