前言

微信小程序（以下簡稱小程序）的自定義導航欄樣式已經開放很久了，一直也沒深入的研究過。前段時間時間看到Readhub小程序版的更新，依然極簡的UI、賞心悅目的體驗，讓人感覺這一切仿佛本該如此。借此機會，研究一下自定義導航欄的用法。

正文從這開始

目前小程序的狀態(tài)欄（navigationStyle:default/custom;）可設置模式有兩種。并且只能在app.json?中設置全局屬性，不支持單個頁面的更改。

第一種?是 default（默認）也是我們常見的，此時：

screenHeight =?statusBarHeight +?tabBarHeight +?windowHeight;

這個時候是不需要自己考慮各個高度問題的，小程序會幫你調（xie）整（si）好（de）statusBarHeight、tabBarHeight，此時你只能在app.json?中設置?navigation?的背景色、標題、顏色等。

第二種是?custom 模式，此時：

screenHeight =?windowHeight;

custom 模式可自定義導航欄，只保留右上角膠囊狀的按鈕。這種模式真的好啊有沒有！?。φ娴娜骘@示很友好啊有沒有，對比一下你就知道了。

那么問題來了，如果我需要像Readhub那樣在navigation?加一個自定義的icon和一個標題怎么辦，沒有了小程序祖?zhèn)鞯膶Ш綑谧隹可剑ㄆ鋵嵞J模式寫死也挺好的），只能是自己動手實現(xiàn)下圖效果。

經過大（數）量（十）的（個）數據采集，可以確定在Android和iOS的設備上statusBarHeight=20px，tabBarHeight則有所區(qū)別，Android設備上為22px，iOS設備上為24px。（都是猜出來的，準不準看緣分，反正測試了沒有貓餅）這樣，在需要全屏展示的時候，例如圖片視頻等可以盡屏幕之所用；在需要?默認的navigation?時，又可以寫成默認的樣子做到icon、title、膠囊早同一水平線上，以假亂真。

最后說一句：以上數據建立在非大數據的基礎上，如有錯誤歡迎大佬留言批評！