微信小程序如何实现自定义navigationBar顶部导航栏全平台适配？

本文共计1464个文字，预计阅读时间需要6分钟。

前言：navigationBar相信大家都不陌生，大小家都不陌生地把原生navigationBar改造成我们想要的样式吧？今天我们就来说说自定义navigationBar，把它改造成我们想要的样式（搜索框+胶囊、搜索框+返回按钮+胶囊等）。

思路：隐藏原生样式+获取胶囊按钮、返回按钮等

1. 隐藏原生样式

2.获取胶囊按钮、返回按钮等

前言

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

思路

• 隐藏原生样式
• 获取胶囊按钮、状态栏相关数据以供后续计算
• 根据不同机型计算出该机型的导航栏高度，进行适配
• 编写新的导航栏
• 引用到页面

正文

一、隐藏原生的navigationBar

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

"window": { "navigationStyle": "custom" }

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

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