自定义导航栏

119 阅读1分钟

1,隐藏默认导航栏

  • app.json中添加属性 “navigationStyle”: “custom”

5aa3f8216ffd2a52f541ea46d4f9d13.png

  • 设置完效果

f140bc5a9412f868691525f60e42c7c.png

2,自定义导航栏样式

image.png

3, 计算导航栏高度

参见

  • 思路 1.调用 wx.getMenuButtonBoundingClientRect()获取菜单按钮(右上角胶囊按钮)的布局位置信息。坐标信息以屏幕左上角为原点

image.png

  • 思路2,用wx.getSystemInfoSync()获取系统信息,获取参数statusBarHeight(状态栏高度)

image.png

  • 思路3,导航栏高度 = 状态栏高度 + 44/48。(iPhone :44p,安卓:48)

1682326442279.jpg

tip 这个48和44我觉得这里说的比较清楚,请移步)