说一说要求小程序自定义导航栏的产品有多沙雕

短命女 2023-05-21 10:17 2阅读 0赞

> 小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在 [超级App][App] 内被便捷地获取和传播，同时具有出色的使用体验。

在小程序项目中 **自定义导航栏** 绝对算得上是最恶心的需求之一。本篇文章公开 喷 一下要求 小程序自定义导航栏 产品们的沙雕行为。可能会引起 产品 们的唾沫攻击，但我还是要喷，不服都顺着网线来打我啊。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70][]

小程序有 顶部导航栏（navigationBar）和底部导航栏（tabBar）。

# \# 顶部导航栏（navigationBar） #

首先说一下小程序框架的 顶部导航栏 做了什么？

1.  丰富的 API，如动态设置标题和加载状态动画；
2.  兼容刘海屏/水滴屏/挖孔屏；
3.  原生窗口不会因软键盘弹起而页面上顶也会因窗口距离顶部的问题而使在异形屏时下拉看不到加载效果；

自定义顶部导航栏能带来什么？

1.  更好的视觉效果；

好像除了好看以外，框架的导航栏 所解决的问题它都有。而且部分问题是无法解决的。自定义后页面的下拉和输入框都要受到这个影响，通过合理的页面设计能避免一部分问题。许多大厂的小程序也有在一些特殊页面自定义顶部导航栏，大部分还是保留的框架原生导航栏。

从上面的对比，好像也没看出太大的问题，也不足以说明要求自定义的产品有多沙雕。下面就是本文的高潮。

# \# 底部导航栏（tabBar） #

**一说到自定义底部导航栏，我的内心就有百万只草泥马在奔腾在跳跃在旋转，内心草泥马们旋转带起的飓风凝聚到我的手上形成了“螺旋丸”，真想跳起来对着沙雕们的狗头就是一下。**

**![20200420232647425.gif][]**

首先说一下小程序框架的 底部导航栏 做了什么？

1.  多窗口切换（这是最核心的功能，多窗口是小程序与公众号相比最大的区别之一，也是小程序中重要的特色能力，这是H5页面无法达到的体验效果）；
2.  良好的兼容 iPhone X设备。
3.  丰富的 API，比如 红点 和 消息数量。

自定义底部导航栏能带来什么？

1.  好看（中间的按钮格外的凸出，真TM刺激）；

好像除了好看以外，没有了其它的优点。

自定义底部导航栏最多的需求就是要中间的按钮突出。非常想问一下 要求自定义的产品们几个问题：

1.  中间按钮凸出的产品就能成功？多去看一看各大厂的小程序，那一个是凸出的？
2.  知道不使用框架的原生底部导航将面临的问题有多少吗？

关于中间的按钮凸出这N年前玩烂的创意，就一个按钮能带来多大的意义？除了小程序外 再去看一看 国民App 微信/QQ/支付宝/淘宝/JD/抖音，那一个是中间凸出按钮的？真正能解决用户需求的产品才是能成功的产品。不要拿原生App的需求去要求小程序，不要让自行车跟超跑对飙了好吗？坐在超跑上的原生App才是前端街上最靓的仔，不仅帅，而且又快又丝滑。

下面数一数不使用 框架的 原生底部导航 会带来那一些问题：

1.  缺少系统导航，所有的代码必须全写在一个页面上，最好的方式就是通过多个自定义组件去切换显示。代码的可维护性大大折扣，首页加载的速度也必然缓慢。
2.  iPhone X 设备的底部 home 键需要自行处理。
3.  如果前2个能接受，第3个问题就是因产品需要，不保证导航页的所有窗口都需要下拉刷新，此时因都在同一个窗口，只能要么全部开启，要么全部关闭。（这种情况一般只能全部开启这种妥协的方式）。
4.  下拉刷新时 导航栏 会因为下拉而随窗口移动到不可视区域。

小程序的框架原生导航栏已经做了太多的兼容及体验上的处理，自定义就是体验的倒退，绝对不能为了一个按钮，一个渐变的颜色去放弃使用原生导航栏。一个优秀的产品是能稳定的运行和解决用户的需求，一个凸出的按钮与产品的成功没有关系。

微信小程序是支持是支持自定义 tabBar 的，小编会在以后的文章中更新一篇实现过程及注意事项，目前初体验中，该配置并不那么完美。虽然支持，但我并不推荐，有时候确实是因为特殊业务需求，才打算在以后的文章中专门分享一次微信小程序的自定义 tabBar，敬请期待。

> 微信小程序 自定义tabBar(底部导航栏)：[https://blog.csdn.net/u013350495/article/details/105757452][https_blog.csdn.net_u013350495_article_details_105757452]
> 
> --------------------
> 
> 小程序 底部导航栏(tabBar)图标的正确做法：[https://blog.csdn.net/u013350495/article/details/106106872][https_blog.csdn.net_u013350495_article_details_106106872]

自定义一时爽，日后才知道会有多少东西受之影响且不能解决。

> 总结：自定义 navigationBar 辛苦一点可以看页面功能搞一搞。自定义 tabBar 这需求是真的不能搞（小编的态度就是 **放弃自定义** 和 **换人来开发** 之间二选一）。

除了小程序之外 uniapp 开发的 app 也不推荐自定义，因为带来的问题都是相同的。

### **愿这个世界不再有要求 小程序自定义导航栏 的沙雕产品。** ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 1][]

[App]: https://mp.weixin.qq.com/s/Q3Dfrcf5FTmWUrsIkPWncA
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70]: /images/20230521/43f0b122a4b74ec187cc624ae1fe0587.png
[20200420232647425.gif]: /images/20230521/a42e9412c0064139a6004f3c8c5c0aa7.png
[https_blog.csdn.net_u013350495_article_details_105757452]: https://blog.csdn.net/u013350495/article/details/105757452
[https_blog.csdn.net_u013350495_article_details_106106872]: https://blog.csdn.net/u013350495/article/details/106106872
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70 1]: /images/20230521/922ac96b987a476bb53dafc5cdb8002f.png