微信小程序 android导航栏字体,微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）...

前言

navigationBar相信大家都不陌生把？今天我们就来说说自定义navigationBar，把它改变成我们想要的样子(搜索框+胶囊、搜索框+返回按钮+胶囊等)。

思路

隐藏原生样式

获取胶囊按钮、状态栏相关数据以供后续计算

根据不同机型计算出该机型的导航栏高度，进行适配

编写新的导航栏

引用到页面

正文

一、隐藏原生的navigationBar

window全局配置里有个参数：navigationStyle(导航栏样式)，default=默认样式，custom=自定义样式。

"window": {

"navigationStyle": "custom"

}

复制代码

让我们看看隐藏后的效果：

可以看到原生的navigationBar已经消失了，剩下孤零零的胶囊按钮，胶囊按钮是无法隐藏的。

二、准备工作

1.获取胶囊按钮的布局位置信息

我们用wx.getMenuButtonBoundingClientRect() 【官方文档】 获取胶囊按钮的布局位置信息，坐标信息以屏幕左上角为原点：

const menuButtonInfo = wx.getMenuButtonBo