本文背景
最近在小程序迭代过程中，打算引入自定义导航组件，这在之前是一个未接触的知识点，对我而言也是一种挑战
本文内容
本文主要列出我在实现过程中参考社区以及社区之外的文章
1）胶囊的布局位置及尺寸信息
https://developers.weixin.qq.com/miniprogram/dev/api/ui/menu/wx.getMenuButtonBoundingClientRect.html
2）状态栏高度信息
https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html
3）https://developers.weixin.qq.com/miniprogram/design/
4）小程序组件—自定义顶部导航
https://juejin.im/post/6844903862852141070
5）微信小程序自定义导航栏组件
https://juejin.im/post/6844903860029358094
6）如何实现一个自定义导航栏? -
https://developers.weixin.qq.com/community/develop/article/doc/000060f9cf8900246c789a36453413
7）小程序自定义导航栏的开发原理及编码思路实践 (附带可直接使用的自定义导航栏组件)? https://developers.weixin.qq.com/community/develop/article/doc/000646ab68003095767aaa15b5b013
实现效果
最终顶部导航栏实现的效果就是如下图所示
效果一，非全屏
效果二，全屏
代码片段
本代码片段参考社区大佬，仙森，在文章的评论区
https://developers.weixin.qq.com/s/m16krgmD78lE
本文总结
关于这块代码就不贴了，在上面的参考文章中都有对应的代码。
