前言
navigationBar相信大家都不陌生把？今天我们就来说说自定义navigationBar，把它改变成我们想要的样子（搜索框+胶囊、搜索框+返回按钮+胶囊等）。
思路
隐藏原生样式获取胶囊按钮、状态栏相关数据以供后续计算根据不同机型计算出该机型的导航栏高度，进行适配编写新的导航栏引用到页面正文
一、隐藏原生的navigationBar
window全局配置里有个参数：navigationStyle（导航栏样式），default=默认样式，custom=自定义样式。
"window": {"navigationStyle": "custom"}
让我们看看隐藏后的效果：
可以看到原生的navigationBar已经消失了，剩下孤零零的胶囊按钮，胶囊按钮是无法隐藏的。
二、准备工作
1. 获取胶囊按钮的布局位置信息
我们用wx.getMenuButtonBoundingClientRect()【官方文档】获取胶囊按钮的布局位置信息，坐标信息以屏幕左上角为原点：
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
2. 获取系统信息
用wx.getSystemInfoSync()【官方文档】获取系统信息，里面有个参数：statusBarHeight（状态栏高度），是我们后面计算整个导航栏的高度需要用到的。
const systemInfo = wx.getSystemInfoSync();
三、计算公式
我们先要知道导航栏高度是怎么组成的，
计算公式：状态栏高度 + 44
实例【源码下载】
自定义导航栏会应用到多个、甚至全部页面，所以封装成组件，方便调用；下面是我写的一个简单例子：
app.js
App({onLaunch: function(options) {const that = this;// 获取系统信息const systemInfo = wx.getSystemInfoSync();// 胶囊按钮位置信息const menuButtonInfo = wx.getMenuButtonBoundingClientRect();// 导航栏高度 = 状态栏高度 + 44that.globalData.navBarHeight = systemInfo.statusBarHeight + 44;that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;that.globalData.menuTop= menuButtonInfo.top;that.globalData.menuHeight = menuButtonInfo.height;},// 数据都是根据当前机型进行计算，这样的方式兼容大部分机器globalData: {navBarHeight: 0, // 导航栏高度menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）menuTop: 0, // 胶囊距顶部间距menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）}})
app.json
{"pages": ["pages/index/index"],"window": {"navigationStyle": "custom"},"sitemapLocation": "sitemap.json"}
下面为组件代码：
/components/navigation-bar/navigation-bar.wxml
<!-- 自定义顶部栏 --><view class="nav-bar" style="height:{{navBarHeight}}px;"><input class="search" placeholder="输入关键词！" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; left:{{menuRight}}px; top:{{menuTop}}px;"></input></view><!-- 占位，高度与顶部栏一样 --><view style="height:{{navBarHeight}}px;"></view>
/components/navigation-bar/navigation-bar.json
{"component": true}
/components/navigation-bar/navigation-bar.js
const app = getApp()Component({properties: {// defaultData（父页面传递的数据-就是引用组件的页面）defaultData: {type: Object,value: {title: "我是默认标题"},observer: function(newVal, oldVal) {}}},data: {navBarHeight: app.globalData.navBarHeight,menuRight: app.globalData.menuRight,menuTop: app.globalData.menuTop,menuHeight: app.globalData.menuHeight,},attached: function() {},methods: {}})
/components/navigation-bar/navigation-bar.wxss
.nav-bar{ position: fixed; width: 100%; top: 0; color: #fff; background: #000;}.nav-bar .search{ width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;}
以下是调用页面的代码，也就是引用组件的页面：
/pages/index/index.wxml
<navigation-bar default-data="{{defaultData}}"></navigation-bar>
/pages/index/index.json
{"usingComponents": {"navigation-bar": "/components/navigation-bar/navigation-bar"}}
/pages/index/index.js
const app = getApp();Page({data: {// 组件参数设置，传递到组件defaultData: {title: "我的主页", // 导航栏标题}},onLoad() {console.log(this.data.height)}})
效果图：
好了，以上就是全部代码了，大家可以文中复制代码，也可以【下载源码】，直接到开发者工具里运行，记得appid用自己的或者测试哦！
下面附几张其它小程序的效果图，大家也可以尝试照着做：
