微信小程序自定义导航栏navigationBar

最新推荐文章于 2024-08-16 08:13:55 发布

努力的dl

最新推荐文章于 2024-08-16 08:13:55 发布

阅读量8.5k

点赞数 15

分类专栏：小程序随笔文章标签：小程序前端

本文链接：https://blog.csdn.net/weixin_43424672/article/details/104918931

版权

本文介绍了微信小程序自定义导航栏的必要性和方法。通过去除原生导航栏，计算navigationBarHeight，利用wx.getSystemInfo()和wx.getMenuButtonBoundingClientRect()获取设备信息，实现自定义导航栏的布局和高度定位，以满足产品个性化需求。

摘要由CSDN通过智能技术生成

这里使用三段论是什么为什么怎么做来阐述自定义navigationBar，如果只关心怎么做可直接跳至怎么做段落。

微信小程序一般来说有两个bar，一个导航栏，一个tabbar（小程序下方一排切换按钮），实现下方自定义tabbar的方法一般来说较为简单，现在着重叙述上方自定义导航栏的实现。

wx.getSystemInfo() 在这里插入图片描述

部分获取到的信息如上图（截取自微信小程序开发者文档），对我们理解布局有用的信息是以上跟宽度高度相关的属性，如当前设备的屏幕高宽，可用高宽，以及saveArea。

在这里插入图片描述

上图展示我们从systemInfo获取到的数据的实际表现，以苹果X的刘海屏为例（所有安卓刘海屏原理类似）：最外层的红色框即屏幕大小，蓝色框即安全区域字面意思也就是开发者所能操纵的页面区域，上面的黄色框即手机的状态栏，绿色区域即我们要自定义的navigationBar。
可见，导航栏紧贴safeArea的上部，如果使用原生导航栏，导航栏下方即是真正意义的可操控范围。
实际上我们自定义的导航栏也是在这个safeArea内与胶囊对齐最为和谐。很关键的原因就是微信将右上角的胶囊按钮作为了内置组件，只有黑白两种颜色，即我们无法改变它的大小位置透明度等等，所以为了配合胶囊按钮，一般自定义的导航栏位置也与上图位置一致。

1584175765267 1584175838964

使用"wx.getSystemInfo()“获取到"statusBarHeight”，这样就确定了导航栏最基本的距离屏幕上方的据里。
使用"wx.getMenuButtonBoundingClientRect()"获取到小程序的胶囊信息（注意这个api存在各种问题，在不同端表现不一致，后面会叙述这个api调用失败的处理情况），如下图，以下坐标信息以屏幕左上角为原点。

在这里插入图片描述

以下图为例，上面的红色框是statusBar，高度已知；下面的红色框是正文内容，夹在中间的就是求解之一navigationBarHeight；而黄色的是原生胶囊按钮也是在垂直居中位置，高度为胶囊按钮基于左上角的坐标信息已知，不难得出，navigationBarHeight = 蓝色框高度 × 2 + 胶囊按钮.height。（蓝色框高度 = 胶囊按钮.top - statusBarHeight）

在这里插入图片描述

最后的计算公式为：navigationBarHeight = （胶囊按钮.top - statusBarHeight） × 2 + 胶囊按钮.height。navigationBar 距屏幕上方的距离即为navigationBarHeight。
这种计算方法在各种机型以及安卓ios都适用。
针对"wx.getMenuButtonBoundingClientRect()"获取错误或者获取数据为0的极少数情况，只能够去模拟，对于android，一般navigationBarHeight为48px，而对于ios一般为40px，所有机型的胶囊按钮高度是32px笔者也是通过网上很多的文章和自测得出的，这种误差一般可以忽略。当然最理想的就是微信可以hold住所有机型，呵呵。最后提醒一下仅以真机为准，开发者工具的bug就更多不说了。