小程序自定义导航栏适配（完美版）
一、发现问题
小程序页面自定义导航栏功能已经开放有些日子了(还不知道这个功能的能够先>>了解一下)，这极大的提高了小程序开发的自由度，相信很多小伙伴已经使用过这个功能，同时也相信很多小伙伴在此功能开发过程当中踩过一样的一些坑：
javascript
- 机型多如牛毛：自定义导航栏高度在不一样机型始终没法达到视觉上的统一；
- 调皮的胶囊按钮：导航栏元素（文字，图标等）怎么也对不齐那该死的胶囊按钮；
- 各类尺寸的全面屏，奇怪的刘海屏，简直要抓狂。
二、一探究竟
为了搞明白到底该怎么去适配，老规矩，我先翻了一波官方文档，还别说，官方还真有这么一段介绍了相关细节，>>详情点击：
html
从图中分析，咱们能够获得以下信息：java
- Android跟iOS有差别，表如今顶部到胶囊按钮之间的距离差了6pt
- 胶囊按钮高度为32pt， iOS和Android一致
这。。。，好像并无什么L用啊？？这仅仅是普通屏幕为参照的，ipx， 安卓全面屏彻底没介绍。git
沉着冷静，咱们接着分析：github
- 胶囊按钮到状态栏下边缘这块距离，好像是固定的？
- 安卓这个图，好像有点奇怪？导航栏分为 状态栏+标题栏？
那么咱们来论证一下：小程序
第一个问题：胶囊按钮到状态栏下边缘的距离是否是固定的bash
- 很简单，咱们写一个状态栏，经过wx.getSystemInfoSync().statusBarHeight设置高度
- 为了好测量，咱们设置状态栏背景色为深色
var sysinfo = wx.getSystemInfoSync();
this.setData({
statusBarHeight:sysinfo.statusBarHeight
})复制代码
wxml代码：
微信
<view class="status-bar" style="height:{{statusBarHeight}}px"></view>复制代码
wxss代码：app
.status-bar{ background: rgb(141, 71, 71);}复制代码
效果图（iPhone6）：xss
效果图（iPhoneX）：
效果图（安卓）：
是否是有点眉目了？是的，从截图能够看出，iOS是一致的，可是Android好像有所差异。
那究竟距离是多少？咱们用神器（微信截图）来量一量：
Android：
iOS：
能够看出，iOS胶囊按钮与状态栏之间距离为：6px， Android为8px，而且通过测量，iOS各机型，Android各机型结果一致（因为篇幅缘由，就不一一展现截图了，有兴趣的能够自行测量）
第二个问题：导航栏分为 状态栏+标题栏？
经过对第一个问题的论证，很明显能看出来确实是这样的。而且经过第一个问题的测量结果以及官方提供的数据，咱们能够对标题栏高度进行计算：
导航栏高度 = 胶囊按钮高度 + 状态栏到胶囊按钮间距 * 2 Android导航栏高度 = 32px + 8px * 2 = 48px iOS导航栏高度 = 32px + 6px * 2 = 44px
*注：因为胶囊按钮是原生组件，为表现一致，其单位在个系统都为px，因此咱们的自定义导航栏各个高度的单位都必需是px（切记不能用rpx），才能完美适配。
三、解决问题
经过上述分析，相信小伙伴们都能有一个解决问题的思路了，在上代码以前，小灰再给你们画一下重点：
- 写自定义导航组件的时候，须要将组件结构一分为二：状态栏 + 标题栏
- 状态栏高度可经过wx.getSystemInfoSync().statusBarHeight获取
- 标题栏高度：安卓：48px，iOS：44px
- 单位必需跟胶囊按钮一致，用px
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
}
},
attached: function(){
var that = this;
that.setNavSize();
that.setStyle();
},
data: {
},
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', {});
}
}})
复制代码
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>复制代码
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;}复制代码
运行效果图：
文字标题：
图片标题：
四、总结
通过小灰的一番论证以及实践经验，最终总结出以上最终解决方案，但但愿对小伙伴们有所帮助，若是小伙伴们以为有用，记得给颗star哦 --> 点我，后续还会更新其余组件。
若是你们有更好的方案或者以为小灰的方案有问题，欢迎你们留言。