關於uni-app開發的微信小程式頂部導航條機型適配
阿新 • • 發佈:2021-06-28
背景:
小程式頂部導航欄那裡的樣式和功能都是小程式自帶的,當我們在pages.json裡的pages裡新加一條頁面配置時,會自動生成一個帶頂部導航欄的空白頁面,當然也可以再配置裡"navigationBarTitleText","navigationBarTextStyle","navigationBarBackgroundColor",來改變導航欄標題字型,標題字型顏色,導航欄背景顏色,其實上面那些配置一般的應用場景下夠用了, 但是有時候產品就偏偏不想用他的預設樣式, 想在那裡放張背景圖, 放個輸入框, 放個按鈕啥的,這時候就需要自定義導航條了
實現:
-
pages.json裡配置navigationStyle為custom
{ "path": "pages/index/index", "pageOrientation": "landscape", "style": { "navigationStyle":"custom", } },
- 如上配置好後即可實現自定義導航欄,不過直接寫的話會有機型樣式的差異, 如iPhoneX等機型的劉海屏會遮住部分內容,處理辦法是獲取導航欄資訊,根據小程式右上角的膠囊定位, 程式碼如下
onLaunch: function() {// 獲取系統資訊
}, globalData: { navBarHeight: </span>0, <span style="color: #008000;">//</span><span style="color: #008000;"> 導航欄高度</span> menuRight: 0, <span style="color: #008000;">//</span><span style="color: #008000;"> 膠囊距右方間距(方保持左、右間距一致)</span> menuBotton: 0, <span style="color: #008000;">//</span><span style="color: #008000;"> 膠囊距底部間距(保持底部間距一致)</span> menuHeight: 0, <span style="color: #008000;">//</span><span style="color: #008000;"> 膠囊高度(自定義內容可與膠囊高度保證一致)</span> },</pre>
這樣就獲取到了所需資訊並存到了globalData全域性變數裡
在頁面或元件裡用到這些資訊
export default { data() { return { // 機型頂部適配 navBarHeight: getApp().globalData.navBarHeight, menuRight: getApp().globalData.menuRight, menuBotton: getApp().globalData.menuBotton, menuHeight: getApp().globalData.menuHeight, }}</span><span style="color: #000000;"> }</span></pre>
思路如上, 部分樣式程式碼沒貼上去自行新增即可