说一说要求小程序自定义导航栏的需求有多沙雕_抖音小程序自定义导航栏-CSDN博客

本文链接：https://blog.csdn.net/u013350495/article/details/105645427

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

在小程序项目中 自定义导航栏 绝对算得上是最恶心的需求之一。本篇文章公开喷一下要求小程序自定义导航栏需求的沙雕行为。

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

# 顶部导航栏（navigationBar）

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

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

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

更好的视觉效果；

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

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

# 底部导航栏（tabBar）

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

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

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

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

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

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

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

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

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

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

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

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

我该如何说服要自定义 tabBar 的沙雕需求方？

如果是需要中间凸出的按钮，可以推荐需求方看看抖音，微信，支付宝，QQ，淘宝，说明上述的问题带来的影响，并告诉需求方用户不是“瞎子”，不凸出用户TMD也能看得见；
如果是因为权限关系，需求方个人的YY出来的要根据权限动态切换tabBar，那么可以通过将“管理相关入口”在比如“个人中心”的页面中显示，毕竟某些特殊权限的用户是较少的，不能为了某几个并不给为公司带来实际利益的用户而影响成千上万为公司产品充钱的用户体验；
至于顶部导航(navBar)，和需求方“约法三章”，自定义了就不能有输入框，必须跳页面去输入。开发者们这个点可以参考“小米商城小程序”；

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

微信小程序自定义tabBar(底部导航栏)：微信小程序自定义tabBar(底部导航栏)_黄河爱浪的博客-CSDN博客

小程序底部导航栏(tabBar)图标的正确做法：小程序底部导航栏(tabBar)图标的正确做法_黄河爱浪的博客-CSDN博客_微信小程序tabbar图标

如果你就喜欢花里胡哨的导航栏，小编给为你准备好了，请点击下方链接查看

底部导航栏（有动画的） - DCloud 插件市场

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