小程序自定義導航欄

GitHub: https://github.com/WozHuang/Miniprogram-Demo/tree/master/custom-navigation

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

做這個的原因是看到了微博的小程序頂部的導航欄有點花里胡哨的東西，於是我也要做。

行吧，那我也造一個 （ノಠ益ಠ）ノ┻━┻

優點：

1. 花里胡哨的導航欄，老板喜歡，產品喜歡，升職加薪，指日可待

2. 多個頁面可以有不同的導航欄啦，還可以滿足某個頁面不需要導航欄的需求

缺點：

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

2. 因為使用 z-index 和 fixed 定位，頁面中如果某個元素的 z-index很高會覆蓋掉導航欄（當然這個在特定需求也可以實現原生沒有的功能，像隱藏/覆蓋導航欄之類的）

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

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

實現原理

1. 在 app.json 中配置 navigationStyle: custom 隱藏原有的導航欄，使用自定義的導航欄，見官方文檔

2. 頁面中引入所需要的導航欄組件，由導航欄組件進行交互

代碼實現

導航欄組件的代碼分為了兩個部分：

1. <custom-navigation> 組件，起着獲取和計算狀態欄高度和定位導航欄的作用

2. <my-navigation> 組件，其中調用了 <custom-navigation> ，負責導航欄的交互內容

這樣組織代碼是為了在復用導航欄組件的同時滿足多頁面的不同導航欄需求

總結

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

2. 使用自定義導航欄一般是為了實現某些特定的需求，因此代碼僅僅作為示例使用，具體實現還要看需求

效果圖：

參考博客:

https://www.jianshu.com/p/7393c800ba09

https://www.jianshu.com/p/5753a0e1754f