背景

在做快狗打車小程序時，關(guān)于默認導航欄，我們遇到了以下的問題：

我們希望的是：在各個機型頁面上title一致性 & 個性化展示、取得左上角點擊事件控制權(quán)及深層級頁面的一鍵返回

實現(xiàn)

step1 自定義

第一步 取得導航欄的控制權(quán)

小程序支持自定義導航欄，只需要在app.json文件中，window項中配置

"navigationStyle": "custom"

這樣微信就放開了導航欄的控制權(quán)，只保留右上角的膠囊。

頁面會從視窗的頂部開始渲染，如圖

接下來，我們要做的就是實現(xiàn)一個導航欄組件，把它放置在頁面原來的默認導航欄的位置，內(nèi)容什么的完全由開發(fā)者自己定制。

step2 功能點

第二步 梳理導航欄的功能點

導航欄高度 包含兩個部分：工具欄和title欄， 工具欄的高度一般是固定的20px，title欄的高度需要計算

導航欄內(nèi)容的定制，需要識別當前頁面的性質(zhì)，根據(jù)不同的頁面展示不同的內(nèi)容，可以通過獲取當前的頁面路由棧來判定當前的頁面性質(zhì)

step3 導航欄組件基本結(jié)構(gòu)

目前快狗打車小程序的基本結(jié)構(gòu)

// navBar.wxml<cover-view class='place-holder'></cover-view><cover-view class='nav-bar'> <cover-view class='tool-bar' style='height: 20px'></cover-view> <cover-view class='title-bar'>  <cover-view class='left-cell'>   // scene0 常規(guī)首頁 個人中心按鈕   // scene1 非常規(guī)首頁 回首頁按鈕   // scene2 嵌套頁  返回上一頁按鈕 + 回首頁按鈕  </cover-view>  <cover-view class='center-cell'>   // scene0 常規(guī)首頁 個性化title   // scene1 其他頁 正常title  </cover-view>  <cover-view class='right-cell'>   // 占位用的  </cover-view> </cover-view></cover-view>