需求背景：自定义微信小程序导航栏。
因为项目需要，要实现如京东小程序类似的搜索导航栏（下图所示搜索框在导航栏中）。参考了官方API最终实现了该有的效果，顺便把此次实现的思路和代码记录下来。
一、拆解分析
按照正常的导航栏拆解来进行计算自定义导航栏的高度。
根据下图所示可以得到导航栏的高度等于：手机状态栏的高度 + 胶囊按钮高度（途中标注菜单栏）+ 以及胶囊按钮的上下边距。
根据微信 API - wx.getMenuButtonBoundingClientRect 可以得到胶囊按钮的坐标和高宽等信息，详见文档。
再根据微信 API - wx.getSystemInfo(Object object) 获得状态栏高度 — statusBarHeight。
然后计算出边距为：margin = top（胶囊按钮上边界坐标） - statusBarHeight，
最终得到导航栏的高度为：customBarHeight = height + statusBarHeight + (margin * 2)
知道这些信息剩下的就是实现了，下面是全部实现代码。
二、代码实现
1、json文件设置
"navigationStyle": "custom",
2、JS代码部分：需要的data和设置值
data: {
navHeight: ‘‘,
statusBarHeight: 0, // 状态栏高度
searchMarginTop: 0, // 搜索框上边距
searchWidth: 0, // 搜索框宽度
searchHeight: 0 // 搜索框高度
},
onLoad: function () {
let menuButtonInfo = wx.getMenuButtonBoundingClientRect()
const { top, width, height, right } = menuButtonInfo
wx.getSystemInfo({
success: (res) => {
const { statusBarHeight } = res
const margin = top - statusBarHeight
this.setData({
statusBarHeight: statusBarHeight,
navHeight: (height + statusBarHeight + (margin * 2)),
searchMarginTop: statusBarHeight + margin, // 状态栏 + 胶囊按钮边距
searchHeight: height, // 与胶囊按钮同高
searchWidth: right - width - 30 // 胶囊按钮右边坐标 - 胶囊按钮宽度 = 按钮左边可使用宽度，再减去30两边间距
})
},
})
},
3、wxml代码
<view class="search-input" style="height:{{navHeight}}px;padding-top:{{searchMarginTop}}px;">
<view class="flex between input-box" style="height:{{searchHeight}}px;width: {{searchWidth}}px;">
<i class="iconfont cs-search c9 mr10" bindtap="search"></i>
<input class="v-expand f14 c3" value="{{search}}" placeholder="{{placeholder}}" placeholder-class="f14 c9" bindinput="inputValue" bindconfirm="search"/>
</view>
</view>
4、css代码：样式控制及主要有吸顶的操作。
.search-input{
position: sticky;
box-sizing: border-box;
background: #fff;
top: 0;
}
.input-box{
box-sizing: border-box;
padding: 0 30rpx;
margin: 0 30rpx;
background: #f7f7f7;
border-radius: 30rpx;
}