作為前端不一定要什么效果都會做，但是別人能做出來的你也一定要做出來（捂臉.jpg）
做這個的原因是看到了微博的小程序頂部的導(dǎo)航欄有點花里胡哨的東西，于是我也要做。
優(yōu)點：
花里胡哨的導(dǎo)航欄，老板喜歡，產(chǎn)品喜歡，升職加薪，指日可待
多個頁面可以有不同的導(dǎo)航欄啦，還可以滿足某個頁面不需要導(dǎo)航欄的需求
缺點：
本質(zhì)上是模擬出來的導(dǎo)航欄，跟小程序原生的導(dǎo)航欄還有一定區(qū)別，有些小程序原生提供的api用不了，比如
setNavigationBarTitle之類的因為使用 z-index 和 fixed 定位，頁面中如果某個元素的 z-index很高會覆蓋掉導(dǎo)航欄（當(dāng)然這個在特定需求也可以實現(xiàn)原生沒有的功能，像隱藏/覆蓋導(dǎo)航欄之類的）
小程序中存在某些原生組件的層級一定是最高的，此時會覆蓋在自定義的導(dǎo)航欄上，如camera組件（2019-1-30華為實測：video標(biāo)簽是原生組件但是不會覆蓋在fixed定位上，可以使用）
導(dǎo)航欄是否有返回按鈕需要由開發(fā)人員控制，麻煩了不少（有考慮通過獲取小程序頁面棧來判斷是否有上一級頁面，但是這樣如果微信的版本庫一旦有調(diào)整相關(guān)內(nèi)容那就gg了，因此沒做）
實現(xiàn)原理
在 app.json 中配置
navigationStyle: custom隱藏原有的導(dǎo)航欄，使用自定義的導(dǎo)航欄，頁面中引入所需要的導(dǎo)航欄組件，由導(dǎo)航欄組件進行交互
代碼實現(xiàn)
導(dǎo)航欄組件的代碼分為了兩個部分：
<custom-navigation>組件，起著獲取和計算狀態(tài)欄高度和定位導(dǎo)航欄的作用<my-navigation>組件，其中調(diào)用了<custom-navigation>，負責(zé)導(dǎo)航欄的交互內(nèi)容
這樣組織代碼是為了在復(fù)用導(dǎo)航欄組件的同時滿足多頁面的不同導(dǎo)航欄需求
總結(jié)
總的來說缺點大于優(yōu)點，如果非必要建議還是不要搞這種花里胡哨的東西，失去了小程序小而美的特點，而且說不定什么時候微信版本庫一更新就掉坑里了
使用自定義導(dǎo)航欄一般是為了實現(xiàn)某些特定的需求，因此代碼僅僅作為示例使用，具體實現(xiàn)還要看需求