摘要：背景在做小程序時(shí)，關(guān)于默認(rèn)導(dǎo)航欄，我們遇到了以下的問(wèn)題手機(jī)對(duì)于頁(yè)面的展示不一致，安卓的顯示不居中頁(yè)面的只支持純文本級(jí)別的樣式控制，不能夠做更豐富的效果左上角的事件無(wú)法監(jiān)聽(tīng)定制路由導(dǎo)航單一，只能夠返回上一頁(yè)，深層級(jí)頁(yè)面的返回不夠友好探索小程序

在做小程序時(shí)，關(guān)于默認(rèn)導(dǎo)航欄，我們遇到了以下的問(wèn)題：

Android、IOS手機(jī)對(duì)于頁(yè)面title的展示不一致，安卓title的顯示不居中

頁(yè)面的title只支持純文本級(jí)別的樣式控制，不能夠做更豐富的title效果

左上角的事件無(wú)法監(jiān)聽(tīng)、定制

路由導(dǎo)航單一，只能夠返回上一頁(yè)，深層級(jí)頁(yè)面的返回不夠友好

小程序自定義導(dǎo)航欄已開(kāi)放許久>>了解一下，相信不少小伙伴已使用過(guò)這個(gè)功能，同時(shí)不少小伙伴也會(huì)發(fā)現(xiàn)一些坑：

機(jī)型多如牛毛：自定義導(dǎo)航欄高度在不同機(jī)型始終無(wú)法達(dá)到視覺(jué)上的統(tǒng)一

調(diào)皮的膠囊按鈕：導(dǎo)航欄元素（文字，圖標(biāo)等）怎么也對(duì)不齊那該死的膠囊按鈕

各種尺寸的全面屏，奇怪的劉海屏，簡(jiǎn)直要抓狂

為了搞明白原理，我先去翻了官方文檔，>>飛機(jī)，點(diǎn)過(guò)去是不是很驚喜，很意外，通篇大文盡然只有最下方的一張圖片與這個(gè)問(wèn)題有關(guān)，并且啥也看不清，汗汗汗...

我特意找了一張圖片來(lái)

分析上圖，我得到如下信息：

Android跟iOS有差異，表現(xiàn)在頂部到膠囊按鈕之間的距離差了6pt

膠囊按鈕高度為32pt， iOS和Android一致

我們寫(xiě)一個(gè)狀態(tài)欄，通過(guò)wx.getSystemInfoSync().statusBarHeight設(shè)置高度

Android：

iOS:

可以看出，iOS膠囊按鈕與狀態(tài)欄之間距離為：4px， Android為8px，是不是所有手機(jī)都是這種情況呢？
答案是:蘋(píng)果手機(jī)確實(shí)都是4px,安卓大部分都是7和8 也會(huì)有其他的情況(可以自己打印getSystemInfo驗(yàn)證)如何快速便捷算出這個(gè)高度,請(qǐng)接著往下看

導(dǎo)航欄分為狀態(tài)欄和標(biāo)題欄,只要能算出每臺(tái)手機(jī)的導(dǎo)航欄高度問(wèn)題就迎刃而解

導(dǎo)航欄高度 = 膠囊按鈕高度 + 狀態(tài)欄到膠囊按鈕間距 * 2 + 狀態(tài)欄高度

注：由于膠囊按鈕是原生組件，為表現(xiàn)一致，其單位在各種手機(jī)中都為px，所以我們自定義導(dǎo)航欄的單位都必需是px（切記不能用rpx），才能完美適配。

現(xiàn)在我們明白了原理，可以利用膠囊按鈕的位置信息和statusBarHeight高度動(dòng)態(tài)計(jì)算導(dǎo)航欄的高度，貼一個(gè)實(shí)現(xiàn)此功能最重要的方法

let systemInfo = wx.getSystemInfoSync();
let rect = Taro.getMenuButtonBoundingClientRect ? Taro.getMenuButtonBoundingClientRect() : null; //膠囊按鈕位置信息
    Taro.getMenuButtonBoundingClientRect();
    let navBarHeight = (function() { //導(dǎo)航欄高度
            let gap = rect.top - systemInfo.statusBarHeight; //動(dòng)態(tài)計(jì)算每臺(tái)手機(jī)狀態(tài)欄到膠囊按鈕間距
            return 2 * gap + rect.height;
          })();

gap信息就是不同的手機(jī)其狀態(tài)欄到膠囊按鈕間距，具體更多代碼實(shí)現(xiàn)和使用demo請(qǐng)移步下方代碼倉(cāng)庫(kù)，代碼中還會(huì)有輸入框文字跳動(dòng)解決辦法,安卓手機(jī)輸入框文字飛出解決辦法,左側(cè)按鈕邊框太粗解決辦法等等

這么重要的問(wèn)題，官方盡然沒(méi)有提供解決方案...竟然提供了一張看不清的圖片???

網(wǎng)上有很多ios設(shè)置44，android設(shè)置48，還有根據(jù)不同的手機(jī)型號(hào)設(shè)置不同高度，通過(guò)長(zhǎng)時(shí)間的開(kāi)發(fā)和嘗試，本人發(fā)現(xiàn)以上方案并不完美,并且bug很多

Taro組件gitHub地址詳細(xì)用法請(qǐng)參考README

原生組件npm構(gòu)建版本gitHub地址詳細(xì)用法請(qǐng)參考README

原生組件簡(jiǎn)易版gitHub地址詳細(xì)用法請(qǐng)參考README

由于本人精力有限，目前只計(jì)劃發(fā)布維護(hù)好這2種組件，其他組件請(qǐng)自行修改代碼，有問(wèn)題請(qǐng)聯(lián)系

上方2種組件在最下方30多款手機(jī)測(cè)試情況表現(xiàn)良好

iPhone手機(jī)打電話(huà)和開(kāi)熱點(diǎn)導(dǎo)致導(dǎo)航欄樣式錯(cuò)亂，問(wèn)題已經(jīng)解決啦，請(qǐng)去demo里測(cè)試，這里特別感謝moments網(wǎng)友提出的問(wèn)題

本文章并無(wú)任何商業(yè)性質(zhì)，如有侵權(quán)請(qǐng)聯(lián)系本人修改或刪除

文章少量部分內(nèi)容是本人查詢(xún)搜集而來(lái)

如有問(wèn)題可以下方留言討論，微信zhijunxh

斗魚(yú):

虎牙:

微博:

酷狗:

知乎:

知乎是這里邊做的最好的，但是我個(gè)人認(rèn)為有幾個(gè)可以?xún)?yōu)化的小問(wèn)題

打電話(huà)或者開(kāi)啟熱點(diǎn)導(dǎo)致樣式錯(cuò)落，這也是大部門(mén)小程序的問(wèn)題

導(dǎo)航欄下邊距太小，看起來(lái)不舒服

搜索框距離2側(cè)按鈕組距離不對(duì)等

自定義返回和home按鈕中的豎線(xiàn)顏色重了，并且感覺(jué)太粗

如果您看到了此篇文章，請(qǐng)趕快修改自己的代碼，并運(yùn)用在實(shí)踐中吧

掃碼體驗(yàn)我的小程序:

創(chuàng)作不易，如果對(duì)你有幫助，請(qǐng)移步Taro組件gitHub原生組件gitHub給個(gè)星星 star?? 謝謝