本文背景

最近在小程序迭代过程中，打算引入自定义导航组件，这在之前是一个未接触的知识点，对我而言也是一种挑战

本文内容

本文主要列出我在实现过程中参考社区以及社区之外的文章

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

本文总结

关于这块代码就不贴了，在上面的参考文章中都有对应的代码。