微信小程序默認(rèn)的導(dǎo)航欄并不能滿足喜歡花里胡哨的開(kāi)發(fā)者阻荒，在微信客戶(hù)端 6.6.0已經(jīng)開(kāi)始支持針對(duì)單個(gè)頁(yè)面自定義導(dǎo)航欄挠锥，下面介紹下如何開(kāi)發(fā)（挖坑）一個(gè)自定義導(dǎo)航欄組件
1.gif
代碼片段 https://developers.weixin.qq.com/s/Ff9WEGmY7f8O
1.配置：
.json下增加配置項(xiàng)
navigationStyle: "custom"
2.獲取導(dǎo)航欄定位信息
通過(guò)小程序wx.getMenuButtonBoundingClientRect() API可以獲取到右上角膠囊菜單位置信息，不過(guò)這個(gè)接口不穩(wěn)定侨赡，部分機(jī)型會(huì)出現(xiàn)獲取失敗的bug
我們只需要getMenuButtonBoundingClientRect的top和height信息即可
3.使用cover-view
cover-view能覆蓋原生組件視圖
code1.png
4.wxss文件主要使用fixed定位
code3.png
padding-bottom: 18rpx給底部增加點(diǎn)padding,經(jīng)過(guò)測(cè)試18rpx最合適
注意：基礎(chǔ)庫(kù) 1.9.90 起最外層 cover-view 支持 position: fixed
5.js部分
code2.png
6.如何使用
配置文件.png
<header hasBack="{{true}}">首頁(yè)</header>
github: https://github.com/TankCJZ/wx-applets-components
開(kāi)了個(gè)專(zhuān)門(mén)存放微信小程序常用組件的倉(cāng)庫(kù)蓖租，歡迎來(lái)填坑吐槽~
