【微信小程序】自定义导航栏（二）

本文主要是介绍【微信小程序】自定义导航栏（二），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

微信头部导航栏可能通过json配置：
（文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html）

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

分析上图，我得到如下信息：
Android 跟 iOS 有差异，表现在顶部到胶囊按钮之间的距离差了 6pt
胶囊按钮高度为 32pt， iOS 和 Android 一致

如何计算
导航栏分为状态栏和标题栏，只要能算出每台手机的导航栏高度问题就迎刃而解

导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2 + 状态栏高度

注：由于胶囊按钮是原生组件，为表现一致，其单位在各种手机中都为 px，所以我们自定义导航栏的单位都必需是 px（切记不能用
rpx），才能完美适配。

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

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。

实例：

这篇关于【微信小程序】自定义导航栏（二）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！