一、小程序导航栏配置
小程序中.json 文件可以用来对微信小程序进行全局配置和页面配置。关于导航栏的设置，有3个配置，但是相对局限，只能设置背景颜色、标题标题内容及字体颜色，除此之外都是默认样式。
二、自定义导航栏
因为默认的导航栏配置相对限制，所以有时不能满足我们的UI设计要求。比如项目设计了导航栏背景图，或是非纯色的渐变背景等，这个时候我们就需要拥有可以自定义导航栏样式的权限了。
微信也考虑到了这个问题，所以微信提供了一个配置项，开发者可选择自定义导航栏还是使用默认导航栏。不过，这个配置项是有一定的版本要求的，所以如果项目是有面向低版本的，需要考虑兼容性问题。
{
"navigationStyle":"custom"
}
关于配置项的解释：
三、实例操作演示
虽然配置项仅仅是一句代码，但是，在项目实际运用中，并不是一句代码就完成所有，配置自定义后会引起很多后续展示问题，需要补充处理。
下面通过我自己实际运用的项目，记录下在配置自定义导航栏后的相关处理问题和操作，以供后续回忆和大家相互学习。
步骤一
首先要分析自己的项目页面的导航栏情况，是所有页面都使用自定义；还是部分页面使用自定义，部分使用默认；然后决定要使用全局配置还是页面局部配置，还是两者结合。
- 全部使用自定义导航栏：
全局配置项中配置“自定义导航栏”；
app.json
{
"window": {
"navigationStyle": "custom"
}
}
- 部分使用自定义，部分使用默认：
（1）如果是使用自定义的页面 多于 默认，则 全局配置+局部页面配置
例如：项目中getCode页面是使用默认导航栏的，其他使用自定义。
app.json
{
"window": {
"navigationStyle": "custom"
}
}
getCode.json
{
"navigationStyle": "default"
}
**在使用全局配置之后，要注意把非自定义导航栏的页面配置回默认。**
（2）如果是使用默认的页面 多于 自定义，则只进行 局部页面配置
例如：index页面要使用自定义导航栏。
index.json
{
"navigationStyle": "custom"
}
完成后，自定义的页面导航栏会消失，只剩下右侧的胶囊栏，整个页面内容会上移顶到展示屏幕的最顶端。
步骤二
实现自己的自定义背景样式。
在这一步，我的项目需要的是用一个有创意的大背景图，作为导航栏跟部分页面内容的背景。所以在导航栏消失后，我只需要本来页面的内容布局中，编写最顶端的背景图布局和样式，它就会自动展现到最上方。
这里需要根据自己的项目要求去实现。
步骤三
编写一个自适应各种屏幕的自定义基本导航栏。（高度与右侧的胶囊匹配，字体大小适中，重点是在各种尺寸显示屏上正常）
根据网上查询的一些资料和我自己的实际操作，总结的思路如下：
- 进入页面后，动态获取右上角胶囊按钮的布局位置信息；
- 计算出导航栏的高度和上边距等信息；
- 然后动态设置导航栏的相关信息值，设置适当的字体大小等样式；
代码展示如下：
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：
- wx.getSystemInfoSync()
可以获取系统的各项信息，如设备宽度高度、屏幕宽度高度、导航栏高度等等。 - wx.getMenuButtonBoundingClientRect()
可以获取菜单按钮（即右上角胶囊按钮）的布局位置信息，包括高度宽度，距左侧距离，距顶端距离等。
步骤四
在实现自适应的导航栏时，要考虑到页面内容可能超过一页的展示情况。所以，自定义的导航栏元素不能在正常流当中，应该设置相对于浏览器窗口的绝对定位，让导航栏一直固定在上方，不随页面滚动而移动。
样式设置展现：
.project-title {
position: fixed;
width: 100%;
z-index: 100;
text-align: center;
font-size: 32rpx;
font-weight: 600;
color: #fff;
}
步骤五
发现首页可能存在不止一页的展示情况后，当页面内容滚动到顶部，可能就会存在与导航栏重叠的部分，如果导航栏维持原本样式，这样就会呈现很奇怪的展示。
调整的实现思路：
- 计算页面内容中距顶部最近元素与屏幕上方之间的距离，作为滚动距离的限制边界值；
- 监听首页滚动距离；
- 根据滚动距离与边界值的大小比较，判断页面内容是否接近导航栏，来动态变换自定义背景图和顶部导航栏样式。（当页面内容与导航栏重叠，背景图隐藏，导航栏应该恢复为白底黑字的常见样式）
代码展示：
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>
其中，值得关注的技术点：
- 小程序中如何获取Dom元素节点。详细可以查看微信官方提供的小程序文档：
返回一个 SelectorQuery 对象实例
通过这个API就可以获取到任一个DOM元素的信息，如上边界坐标、宽度、高度、竖直滚动位置等等。
