评论

小程序自定义顶部导航栏实现相关总结

小程序自定义顶部导航实现相关总结


本文背景

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

本文内容

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

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


本文总结

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

最后一次编辑于  10-21  
点赞 0
收藏
评论
登录 后发表内容