【已解决】微信小程序如何获取胶囊按钮位置大小，自定义导航栏？-QUI-Notes

【已解决】微信小程序如何获取胶囊按钮位置大小，自定义导航栏？

七娃博客 2021-02-26 1,275人阅读

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

官方api: wx.getMenuButtonBoundingClientRect()

【已解决】微信小程序如何获取胶囊按钮位置大小，自定义导航栏？-QUI-Notes

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就可以了！

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

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