小程序自定义导航栏、胶囊按钮菜单适配
2023-10-19 本文已影响0人
菜鸟一枚kk
在自定义小程序导航栏时，不同的手机，胶囊高度不一样、状态栏高度不一样
需要根据手机，动态的计算高度。
如下图：
截图.png
由上图可知：
自定义导航栏的高度：状态栏 + 导航栏高度
- 获取状态栏信息：wx.getSystemInfo(）
- 导航栏的高度：胶囊高度 + （高度差） * 2
- 获取胶囊信息：wx.getMenuButtonBoundingClientRect()
- 高度差：胶囊顶部距屏幕顶部距离 - 状态栏高度
// 胶囊信息
menu = wx.getMenuButtonBoundingClientRect()
// 获取状态栏信息
system = wx.getSystemInfo
状态栏高度 = system.statusBarHeight
胶囊高度 = menu.top
导航栏高度 = menu.top + (menu.top - system.statusBarHeight) * 2
