如何制作一个自定义小程序导航栏

一、小程序导航栏配置

小程序中.json 文件可以用来对微信小程序进行全局配置和页面配置。关于导航栏的设置，有3个配置，但是相对局限，只能设置背景颜色、标题标题内容及字体颜色，除此之外都是默认样式。

导航栏配置项

二、自定义导航栏

因为默认的导航栏配置相对限制，所以有时不能满足我们的UI设计要求。比如项目设计了导航栏背景图，或是非纯色的渐变背景等，这个时候我们就需要拥有可以自定义导航栏样式的权限了。
微信也考虑到了这个问题，所以微信提供了一个配置项，开发者可选择自定义导航栏还是使用默认导航栏。不过，这个配置项是有一定的版本要求的，所以如果项目是有面向低版本的，需要考虑兼容性问题。

{
"navigationStyle":"custom"
}

关于配置项的解释：

image.png

三、实例操作演示

虽然配置项仅仅是一句代码，但是，在项目实际运用中，并不是一句代码就完成所有，配置自定义后会引起很多后续展示问题，需要补充处理。
下面通过我自己实际运用的项目，记录下在配置自定义导航栏后的相关处理问题和操作，以供后续回忆和大家相互学习。

步骤一

首先要分析自己的项目页面的导航栏情况，是所有页面都使用自定义；还是部分页面使用自定义，部分使用默认；然后决定要使用全局配置还是页面局部配置，还是两者结合。

1. 全部使用自定义导航栏：
   全局配置项中配置“自定义导航栏”；

app.json
{
  "window": {
    "navigationStyle": "custom"
  }
}

2. 部分使用自定义，部分使用默认：
   （1）如果是使用自定义的页面 多于 默认，则 全局配置+局部页面配置
   例如：项目中getCode页面是使用默认导航栏的，其他使用自定义。

app.json
{
  "window": {
    "navigationStyle": "custom"
  }
}
getCode.json
{
  "navigationStyle": "default"
}

    **在使用全局配置之后，要注意把非自定义导航栏的页面配置回默认。**

（2）如果是使用默认的页面 多于 自定义，则只进行 局部页面配置
例如：index页面要使用自定义导航栏。

index.json
{
  "navigationStyle": "custom"
}

完成后，自定义的页面导航栏会消失，只剩下右侧的胶囊栏，整个页面内容会上移顶到展示屏幕的最顶端。

展示

步骤二

实现自己的自定义背景样式。
在这一步，我的项目需要的是用一个有创意的大背景图，作为导航栏跟部分页面内容的背景。所以在导航栏消失后，我只需要本来页面的内容布局中，编写最顶端的背景图布局和样式，它就会自动展现到最上方。
这里需要根据自己的项目要求去实现。

步骤三

编写一个自适应各种屏幕的自定义基本导航栏。（高度与右侧的胶囊匹配，字体大小适中，重点是在各种尺寸显示屏上正常）

根据网上查询的一些资料和我自己的实际操作，总结的思路如下：

1. 进入页面后，动态获取右上角胶囊按钮的布局位置信息；
2. 计算出导航栏的高度和上边距等信息；
3. 然后动态设置导航栏的相关信息值，设置适当的字体大小等样式；

代码展示如下：
index.js

/*动态计算导航栏*/
  autoCalcBar: function () {
    let systemInfo = wx.getSystemInfoSync(); //获取系统信息
    let headerBtnPos = wx.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息
    let customBarH = (headerBtnPos.top - systemInfo.statusBarHeight) * 2 + headerBtnPos.height + 2; //上下内边距+胶囊高度+胶囊border
    let customBarTop = systemInfo.statusBarHeight; //导航栏上顶距离
    let barfontSize = 0;
    if (systemInfo.screenWidth >= 768) {
      barfontSize = 16;
    }
    this.setData({
      customBarH: customBarH,
      customBarTop: customBarTop,
      barfontSize: barfontSize,
      showNavBar: true
    });
  }

index.html

<view wx:if="{{showNavBar}}" style="height:{{customBarH+'px'}};line-height:{{customBarH+'px'}};padding-top:{{customBarTop+'px'}};{{barfontSize!=0?'font-size:'+barfontSize+'px':''}}" class="project-title">wechat</view>

其中重点关注两个API：

1. wx.getSystemInfoSync()
   可以获取系统的各项信息，如设备宽度高度、屏幕宽度高度、导航栏高度等等。
2. wx.getMenuButtonBoundingClientRect()
   可以获取菜单按钮（即右上角胶囊按钮）的布局位置信息，包括高度宽度，距左侧距离，距顶端距离等。

步骤四

在实现自适应的导航栏时，要考虑到页面内容可能超过一页的展示情况。所以，自定义的导航栏元素不能在正常流当中，应该设置相对于浏览器窗口的绝对定位，让导航栏一直固定在上方，不随页面滚动而移动。
样式设置展现：

.project-title {
  position: fixed;
  width: 100%;
  z-index: 100;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;
  color: #fff;
}

步骤五

发现首页可能存在不止一页的展示情况后，当页面内容滚动到顶部，可能就会存在与导航栏重叠的部分，如果导航栏维持原本样式，这样就会呈现很奇怪的展示。

调整的实现思路：

1. 计算页面内容中距顶部最近元素与屏幕上方之间的距离，作为滚动距离的限制边界值；
2. 监听首页滚动距离；
3. 根据滚动距离与边界值的大小比较，判断页面内容是否接近导航栏，来动态变换自定义背景图和顶部导航栏样式。（当页面内容与导航栏重叠，背景图隐藏，导航栏应该恢复为白底黑字的常见样式）

代码展示：
index.js

/*监听用户滑动页面事件*/
  onPageScroll: function (obj) {
    var scrollTop = obj.scrollTop;
    if (scrollTop >= this.data.scrollLimit) {
      this.setData({
        headerIsChange: true
      });
    } else {
      this.setData({
        headerIsChange: false
      });
    }
  },
/*动态计算首页滚动导致header变化的高度限制*/
  calcScrollLimit: function () {
    var self = this;
    let query = wx.createSelectorQuery();
    query.select('#user_info').boundingClientRect(function (rect) { //距顶部最近的元素为id=“user_info”元素
      let top = rect.top;
      self.setData({
        scrollLimit: top - self.data.customBarH - self.data.customBarTop - 5 //个人信息模块距顶部高度-导航栏高度-导航栏距顶部高度
      });
    }).exec();
  },

index.html

<view class="header-wrap {{headerIsChange?'change-header-wrap':''}}">
    <image src="/images/index/index_bar_bg.png" class="bar-bg"></image>
    <view wx:if="{{showNavBar}}" style="height:{{customBarH+'px'}};line-height:{{customBarH+'px'}};padding-top:{{customBarTop+'px'}};{{barfontSize!=0?'font-size:'+barfontSize+'px':''}}" class="project-title">wechat</view>
</view>

其中，值得关注的技术点：

1. 小程序中如何获取Dom元素节点。详细可以查看微信官方提供的小程序文档：
   返回一个 SelectorQuery 对象实例
   通过这个API就可以获取到任一个DOM元素的信息，如上边界坐标、宽度、高度、竖直滚动位置等等。