开发微信小程序页面的时候,总是被碍眼的右上角的“胶囊按钮”气得不得行,尤其我们在自定义导航栏的时候,还必须计算出来“胶囊按钮”大小尺寸,不然页面会被遮挡!
【已解决】微信小程序如何获取胶囊按钮位置大小,自定义导航栏?-Qui-Note
那么如何获取“胶囊按钮”的位置信息呢?

官方api: wx.getMenuButtonBoundingClientRect()

【已解决】微信小程序如何获取胶囊按钮位置大小,自定义导航栏?-Qui-Note

https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html

其实很多人看了api也不知道怎么用,确实微信的api一直就是这样不屑于小白,任性!
小程序获取胶囊和状态栏高度方法:

getNav: function() {
    var that = this
  , sysinfo = wx.getSystemInfoSync()
  , statusHeight = sysinfo.statusBarHeight
  , isiOS = sysinfo.system.indexOf('iOS') > -1
  , navHeight;
    if (!isiOS) {
      navHeight = 48;
    } else {
      navHeight = 44;
    }
    that.setData({
      statusH: statusHeight,
      navH: navHeight
    })
},

将代码复制到js里面,onload的时候调用一下getNav就可以了!

有了状态栏和导航栏的高度,接下来自定义导航栏组件不就是很轻松了,透明的、悬浮的、整体背景的都可以根据我们的需要来定制了!

关于小程序自定义导航栏组件,我专门写了一篇文章《》,可以拿走直接用,希望能帮助到看到这篇文章的你!