「这是我参与2022首次更文挑战的第6天，活动详情查看：2022首次更文挑战」

背景

业务开发中，为满足产品、UI的功能需求，我们需要在导航栏做很多的扩展，小程序自带的系统导航栏功能扩展较差，无法满足业务需求，所以一般我们都是使用自定义的导航栏组件，来满足业务一些特定的需求。本文就基于此场景，实现一个相对通用的导航栏组件

核心思路

导航栏分区：我们针对导航栏整体进行划分区块，分别为back、leftElements、title四个区块，每一个区块都有默认的样式，也提供基于slot的插槽模式，供用户自定义样式，组件提供基础的布局能力。图例示意：

由于微信小程序存在右侧的胶囊按钮所有这里要考虑下。通过坑位来设计导航栏的布局，总体这里分为3个部分，最左侧的返回icon不烦，左侧的按钮部分，中间title部分。每一个区域既有默认的展示逻辑，也支持slot插槽供用户自定义。

设计详情

back项，这里可以给定两个配置back和home，展示对应的icon，也支持隐藏back，并提供slot供用户来自定义。
对齐方式，提供align属性，一般用到的就是left和center。这里特意说明下，当传入的center时，这里我们可以以整个导航栏为基准（包括胶囊按钮）进行居中对齐。
- 当居中时，可以用绝对定位的方式，将title区域居中在中间
处理胶囊按钮，在布局时，我们可以通过微信提供的方法得到

getMenuWidth() {
    const {statusBarHeight, screenWidth} = wx.getSystemInfoSync();
    const res = wx.getMenuButtonBoundingClientRect();
    const {width, top, height, left, right} = res;
    const wxMenuBtnWidth = screenWidth - left + screenWidth - right;
    return {
      wxMenuBtnWidth,
      statusBarHeight
    }
  },

这里我们也可以得到statusBarHeight，在我们实现自定义导航栏时，要考虑这个高度。

左侧按钮，由于空间有限，这里可以做一下限制，最多展示几个，防止太多出现溢出的情况，不过这里研发应该不是太需要关注，UI在设计时就会考虑到了。
插槽设计：插槽设计这块可以基于这样的方式来使用，减少入参的传入：

<block wx:if="{{title}}"></block>
<slot wx:else name="title"></slot>

具体布局；布局这块这里就不再赘述，相信每个开发人员对于这样的布局都是没有问题的。
当然在参数的设计上，要多考虑易用和灵活的话，可以加一些通用的逻辑提供给使用方，
- 比如背景：是否透明，是否是图片。
- 标题字体、字号，字重的参数。
- 定位方面，提供fixed属性，是否是基于正常文档流还是固定到顶部。

总结

我们在设计组件时，要尽可能的考虑各种各样的情况，尽量的在一定的限制下，满足业务需求。所以这里就需要跟UI同学共同维护一套标准。基于标准我们设计组件，才能满足通用性跟标准化。

另一个就是站在使用方的角度，多考虑将组件的稳定性与易用性放在首位，这样才能发挥它的价值。多抽象一些通用的功能，直接提供，而不是提供非常灵活的属性，配置麻烦，导致用户不愿意使用。

希望本篇文章对你有所启发与帮助

小程序技巧系列——自定义导航栏组件

背景

核心思路

设计详情

总结