背景
在做快狗打車小程序時,關(guān)于默認導航欄,我們遇到了以下的問題:
Android、IOS手機對于頁面title的展示不一致,安卓title的顯示不居中 頁面的title只支持純文本級別的樣式控制,不能夠做更豐富的title效果 左上角的事件無法監(jiān)聽、定制 路由導航單一,只能夠返回上一頁,深層級頁面的返回不夠友好我們希望的是:在各個機型頁面上title一致性 & 個性化展示、取得左上角點擊事件控制權(quán)及深層級頁面的一鍵返回
實現(xiàn)
step1 自定義
第一步 取得導航欄的控制權(quán)
小程序支持自定義導航欄,只需要在app.json文件中,window項中配置
"navigationStyle": "custom"
這樣微信就放開了導航欄的控制權(quán),只保留右上角的膠囊。
頁面會從視窗的頂部開始渲染,如圖

接下來,我們要做的就是實現(xiàn)一個導航欄組件,把它放置在頁面原來的默認導航欄的位置,內(nèi)容什么的完全由開發(fā)者自己定制。
step2 功能點
第二步 梳理導航欄的功能點
導航欄高度(各個機型動態(tài)適配) 導航欄內(nèi)容定制 所有機型title居中顯示(自己布局實現(xiàn)) 首頁導航欄左上角顯示個人中心、中部title使用個性圖標 嵌套頁面左上角顯示返回上一頁 + 回到首頁按鈕 非常規(guī)首頁左上角顯示回到首頁按鈕導航欄高度 包含兩個部分:工具欄和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>
新聞熱點
疑難解答