前言
微信小程序（以下簡(jiǎn)稱小程序）的自定義導(dǎo)航欄樣式已經(jīng)開(kāi)放很久了访得，一直也沒(méi)深入的研究過(guò)。前段時(shí)間時(shí)間看到Readhub小程序版的更新鳄炉，依然極簡(jiǎn)的UI拂盯、賞心悅目的體驗(yàn)，讓人感覺(jué)這一切仿佛本該如此团驱。借此機(jī)會(huì)，研究一下自定義導(dǎo)航欄的用法寸痢。
正文從這開(kāi)始
目前小程序的狀態(tài)欄（navigationStyle:default/custom;）可設(shè)置模式有兩種啼止。并且只能在app.json?中設(shè)置全局屬性兵罢，不支持單個(gè)頁(yè)面的更改卖词。
第一種?是 default（默認(rèn)）也是我們常見(jiàn)的，此時(shí)：
screenHeight =?statusBarHeight +?tabBarHeight +?windowHeight;
這個(gè)時(shí)候是不需要自己考慮各個(gè)高度問(wèn)題的即横，小程序會(huì)幫你調(diào)（xie）整（si）好（de）statusBarHeight令境、tabBarHeight顾瞪，此時(shí)你只能在app.json?中設(shè)置?navigation?的背景色陈醒、標(biāo)題、顏色等弥鹦。
第二種是?custom 模式爷辙，此時(shí)：
screenHeight =?windowHeight;
custom 模式可自定義導(dǎo)航欄，只保留右上角膠囊狀的按鈕栓始。這種模式真的好啊有沒(méi)有！Ｑ薄幻赚！對(duì)真的全面顯示很友好啊有沒(méi)有禀忆，對(duì)比一下你就知道了。
那么問(wèn)題來(lái)了落恼，如果我需要像Readhub那樣在navigation?加一個(gè)自定義的icon和一個(gè)標(biāo)題怎么辦箩退，沒(méi)有了小程序祖?zhèn)鞯膶?dǎo)航欄做靠山（其實(shí)默認(rèn)模式寫死也挺好的），只能是自己動(dòng)手實(shí)現(xiàn)下圖效果佳谦。
經(jīng)過(guò)大（數(shù)）量（十）的（個(gè)）數(shù)據(jù)采集戴涝，可以確定在Android和iOS的設(shè)備上statusBarHeight=20px，tabBarHeight則有所區(qū)別吠昭，Android設(shè)備上為22px，iOS設(shè)備上為24px矢棚。（都是猜出來(lái)的郑什，準(zhǔn)不準(zhǔn)看緣分，反正測(cè)試了沒(méi)有貓餅）這樣蒲肋，在需要全屏展示的時(shí)候蘑拯，例如圖片視頻等可以盡屏幕之所用；在需要?默認(rèn)的navigation?時(shí)兜粘，又可以寫成默認(rèn)的樣子做到icon申窘、title、膠囊早同一水平線上孔轴，以假亂真剃法。
最后說(shuō)一句：以上數(shù)據(jù)建立在非大數(shù)據(jù)的基礎(chǔ)上，如有錯(cuò)誤歡迎大佬留言批評(píng)路鹰！
