作為前端不一定要什么效果都會(huì)做，但是別人能做出來的你也一定要做出來（捂臉.jpg）

做這個(gè)的原因是看到了微博的小程序頂部的導(dǎo)航欄有點(diǎn)花里胡哨的東西，于是我也要做。

優(yōu)點(diǎn)：

1. 花里胡哨的導(dǎo)航欄，老板喜歡，產(chǎn)品喜歡，升職加薪，指日可待

2. 多個(gè)頁面可以有不同的導(dǎo)航欄啦，還可以滿足某個(gè)頁面不需要導(dǎo)航欄的需求

缺點(diǎn)：

1. 本質(zhì)上是模擬出來的導(dǎo)航欄，跟小程序原生的導(dǎo)航欄還有一定區(qū)別，有些小程序原生提供的api用不了，比如 setNavigationBarTitle 之類的

2. 因?yàn)槭褂?z-index 和 fixed 定位，頁面中如果某個(gè)元素的 z-index很高會(huì)覆蓋掉導(dǎo)航欄（當(dāng)然這個(gè)在特定需求也可以實(shí)現(xiàn)原生沒有的功能，像隱藏/覆蓋導(dǎo)航欄之類的）

3. 小程序中存在某些原生組件的層級(jí)一定是最高的，此時(shí)會(huì)覆蓋在自定義的導(dǎo)航欄上，如camera組件（2019-1-30華為實(shí)測：video標(biāo)簽是原生組件但是不會(huì)覆蓋在fixed定位上，可以使用）

4. 導(dǎo)航欄是否有返回按鈕需要由開發(fā)人員控制，麻煩了不少（有考慮通過獲取小程序頁面棧來判斷是否有上一級(jí)頁面，但是這樣如果微信的版本庫一旦有調(diào)整相關(guān)內(nèi)容那就gg了，因此沒做）

實(shí)現(xiàn)原理

1. 在 app.json 中配置 navigationStyle: custom 隱藏原有的導(dǎo)航欄，使用自定義的導(dǎo)航欄，

2. 頁面中引入所需要的導(dǎo)航欄組件，由導(dǎo)航欄組件進(jìn)行交互

代碼實(shí)現(xiàn)

導(dǎo)航欄組件的代碼分為了兩個(gè)部分：

1. <custom-navigation> 組件，起著獲取和計(jì)算狀態(tài)欄高度和定位導(dǎo)航欄的作用

2. <my-navigation> 組件，其中調(diào)用了 <custom-navigation> ，負(fù)責(zé)導(dǎo)航欄的交互內(nèi)容

這樣組織代碼是為了在復(fù)用導(dǎo)航欄組件的同時(shí)滿足多頁面的不同導(dǎo)航欄需求

總結(jié)

1. 總的來說缺點(diǎn)大于優(yōu)點(diǎn)，如果非必要建議還是不要搞這種花里胡哨的東西，失去了小程序小而美的特點(diǎn)，而且說不定什么時(shí)候微信版本庫一更新就掉坑里了

2. 使用自定義導(dǎo)航欄一般是為了實(shí)現(xiàn)某些特定的需求，因此代碼僅僅作為示例使用，具體實(shí)現(xiàn)還要看需求