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