前言：
最近又在小程序开发的时候会遇到了需要自定义导航栏的需求，小程序开发平台已经早就提供了这项能力，并且在之前项目中我也提到过这个问题的解决方案：微信小程序之实现页面顶部导航栏透明、隐藏效果。
我们在开发这一部分功能的时候踩过一些坑，下面我将针对我在开发过程中碰到的问题进行总结整理以及提供一套完整的自定义导航栏组件，可以直接上手使用。
源码地址：GitHub
一、问题分析：
为了使我们的项目更好的适配所有的机型，那么就需要先分析一下：
我们可以发现：
Android 跟 iOS 顶部有差异的，表现在顶部到胶囊按钮之间的距离有高度差；胶囊按钮高度为32pt， iOS 和 Android 一致。
1、手机机型太多：自定义导航栏高度在不同机型始终无法达到视觉上的统一
2、胶囊按钮位置不固定：导航栏元素（文字，图标等）怎么也对不齐胶囊按钮
那么，我们可以通过wx.getSystemInfoSync()来获取状态栏高度的具体数据。
二、问题解决：
整体思路：
自定义导航组件的时候，将组件结构一分为二：状态栏 + 标题栏状态栏高度可通过wx.getSystemInfoSync().statusBarHeight获取导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2（这个是自定义导航栏的关键，需要去计算这两块的高度）由于胶囊按钮是原生组件，为表现一致，其单位在各系统都为px，所以我们的自定义导航栏各个高度的单位都必需是px（切记不能用rpx），才能完美适配具体配置：
在app.json的window对象中定义导航的样式：
"window":{..."navigationStyle": "custom"},
这样你会发现所有页面的导航栏都不见了。
在index.js的attached里面获取手机系统信息计算导航栏高度
attached: function () {var that = this;that.setNavSize();that.setStyle();},methods: {// 通过获取系统信息计算导航栏高度setNavSize: function () {var that = this, sysinfo = wx.getSystemInfoSync(), statusHeight = sysinfo.statusBarHeight, isiOS = sysinfo.system.indexOf('iOS') > -1, navHeight;if (!isiOS) {navHeight = 48;} else {navHeight = 44;}that.setData({status: statusHeight,navHeight: navHeight})},setStyle: function () {var that = this, containerStyle, textStyle, iconStyle;containerStyle = ['background:' + that.data.background].join(';');textStyle = ['color:' + that.data.color,'font-size:' + that.data.fontSize + 'px'].join(';');iconStyle = ['width: ' + that.data.iconWidth + 'px','height: ' + that.data.iconHeight + 'px'].join(';');that.setData({containerStyle: containerStyle,textStyle: textStyle,iconStyle: iconStyle})},
设置组件wxml：
<view class='nav' style='height: {{status + navHeight}}px'><view class='status' style='height: {{status}}px; {{containerStyle}}'></view><view class='navbar' style='height:{{navHeight}}px; {{containerStyle}}'><view class='back-icon' wx:if="{{backIcon}}" bindtap='back'><image src='{{backIcon}}'></image></view><view class='home-icon' wx:if="{{homeIcon}}" bindtap='home'><image src='{{homeIcon}}'></image></view><view class='nav-icon' wx:if="{{titleImg}}"><image src='{{titleImg}}' style='{{iconStyle}}'></image></view><view class='nav-title' wx:if="{{titleText && !titleImg}}"><text style='{{textStyle}}'>{{titleText}}</text></view></view></view>
完整代码示例（GitHub）：
components/index.wxml（组件布局）
<view class='nav' style='height: {{status + navHeight}}px'><view class='status' style='height: {{status}}px; {{containerStyle}}'></view><view class='navbar' style='height:{{navHeight}}px; {{containerStyle}}'><view class='back-icon' wx:if="{{backIcon}}" bindtap='back'><image src='{{backIcon}}'></image></view><view class='home-icon' wx:if="{{homeIcon}}" bindtap='home'><image src='{{homeIcon}}'></image></view><view class='nav-icon' wx:if="{{titleImg}}"><image src='{{titleImg}}' style='{{iconStyle}}'></image></view><view class='nav-title' wx:if="{{titleText && !titleImg}}"><text style='{{textStyle}}'>{{titleText}}</text></view></view></view>
组件js（组件逻辑以及传参）
Component({/*** 组件的属性列表*/properties: {background: {type: String,value: 'rgba(255, 255, 255, 1)'},color: {type: String,value: 'rgba(0, 0, 0, 1)'},titleText: {type: String,value: '导航栏'},titleImg: {type: String,value: ''},backIcon: {type: String,value: ''},homeIcon: {type: String,value: ''},fontSize: {type: Number,value: 16},iconHeight: {type: Number,value: 19},iconWidth: {type: Number,value: 58}},data: {},attached: function () {var that = this;that.setNavSize();that.setStyle();},methods: {// 通过获取系统信息计算导航栏高度setNavSize: function () {var that = this, sysinfo = wx.getSystemInfoSync(), statusHeight = sysinfo.statusBarHeight, isiOS = sysinfo.system.indexOf('iOS') > -1, navHeight;if (!isiOS) {navHeight = 48;} else {navHeight = 44;}that.setData({status: statusHeight,navHeight: navHeight})},setStyle: function () {var that = this, containerStyle, textStyle, iconStyle;containerStyle = ['background:' + that.data.background].join(';');textStyle = ['color:' + that.data.color,'font-size:' + that.data.fontSize + 'px'].join(';');iconStyle = ['width: ' + that.data.iconWidth + 'px','height: ' + that.data.iconHeight + 'px'].join(';');that.setData({containerStyle: containerStyle,textStyle: textStyle,iconStyle: iconStyle})},// 返回事件back: function () {wx.navigateBack({delta: 1})this.triggerEvent('back', {back: 1 })},home: function () {this.triggerEvent('home', {});}}})
组件样式wxss
.navbar{position: relative}.back-icon, .home-icon{width: 28px;height: 100%;position: absolute;transform: translateY(-50%);top: 50%;display: flex;}.back-icon{left: 16px;}.home-icon{left: 44px}.back-icon image{width: 28px;height: 28px;margin: auto;}.home-icon image{width: 20px;height: 20px;margin: auto;}.nav-title, .nav-icon{position: absolute;transform: translate(-50%, -50%);left: 50%;top: 50%;font-size: 0;font-weight: bold;}
使用组件
{"usingComponents": {"navigateBar": "../../components/navigateBar/index"}}
<navigateBar title-text="自定义导航栏" back-icon="/images/back.png"home-icon="/images/home_icon.png"background="#f2f2f2"bindback="back"/>
效果展示
总结
经过一系列不断的摸索与学习，终于搞定了一个完美适配各种机型的自定义导航栏，具体完整代码已经上传 git，欢迎大家 star🌟 哦。
如果大家有什么更好的解决方案，欢迎留言讨论。
最后不要忘记一键三连哦～各位！加油！
