小程序自定义头部导航栏

微信头部导航栏可能通过json配置：

但是有时候我们项目需求可能需要自定义头部导航栏，如下图所示：

现在具体说一下实现步骤及使用方法：

步骤：

1.在 app.json 里面把 "navigationStyle" 设置为 "custom"

这样子之后就只会保留右上角胶囊按钮了。

2.计算相关值

因为在不同的手机型号头部那条栏目高度可能不一致，所以为了我们适配更多型号，我们需要计算3个值：

如下图：

1. 整个导航栏的高度；

2. 胶囊按钮与顶部的距离；

3. 胶囊按钮与右侧的距离。

小程序可以通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息  和 wx.getSystemInfo() 获取设备信息。

如下图：

通过这些信息我们可以计算出上面说的3个值：

1. 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2；

2. 胶囊按钮与顶部的距离 = top；

3.胶囊按钮与右侧的距离 = windowWidth - right。

转载：https://www.cnblogs.com/sese/p/9761713.html