大部分情況下我們都是使用微信官方自帶的 navigationBar 配置 ,但有時候我們需要在導航欄集成搜索框、自定義背景圖、返回首頁按鈕等。
隱藏官方導航欄
獲取膠囊按鈕、狀態(tài)欄相關數據以供后續(xù)計算
根據不同機型計算導航欄高度
編寫新的導航欄
頁面引用自定義導航
隱藏導航欄可以全局配置,也可以單獨頁面配置,具體根據業(yè)務需求來。
全局隱藏
//app.json "window": { "navigationStyle": "custom" } 復制代碼
頁面隱藏
//page.json { "navigationStyle": "custom" } 復制代碼
公式:導航欄高度 = 狀態(tài)欄到膠囊的間距(膠囊距上邊界距離-狀態(tài)欄高度) * 2 + 膠囊高度 + 狀態(tài)欄高度。 由公式得知,我們需要獲取 狀態(tài)欄高度 膠囊高度 膠囊距上距離
注:狀態(tài)欄到膠囊的間距 = 膠囊到下邊界距離。所以這里需要*2
用 wx.getSystemInfoSync() 官方API 可以獲取系統(tǒng)相關信息, statusBarHeight 屬性可以獲取到狀態(tài)欄高度
const statusBarHeight = wx.getSystemInfoSync().statusBarHeight; 復制代碼
用 wx.getMenuButtonBoundingClientRect() 官方API 可以獲取菜單按鈕膠囊按鈕的布局位置信息。
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();//膠囊相關信息 const menuButtonHeight = menuButtonInfo.height //膠囊高度 const menuButtonTop = menuButtonInfo.top//膠囊距上邊界距離 復制代碼
一般情況下,我們需要在運用啟動的初始化生命周期鉤子進行計算相關的數據,也就是入口文件 app.js 的 onLaunch 生命周期鉤子
//app.js App({ onLaunch: function () { this.setNavBarInfo() }, globalData: { //全局數據管理 navBarHeight: 0, // 導航欄高度 menuBotton: 0, // 膠囊距底部間距(保持底部間距一致) menuRight: 0, // 膠囊距右方間距(方保持左、右間距一致) menuHeight: 0, // 膠囊高度(自定義內容可與膠囊高度保證一致) }, /** * @description 設置導航欄信息 */ setNavBarInfo () { // 獲取系統(tǒng)信息 const systemInfo = wx.getSystemInfoSync(); // 膠囊按鈕位置信息 const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); // 導航欄高度 = 狀態(tài)欄到膠囊的間距(膠囊距上距離-狀態(tài)欄高度) * 2 + 膠囊高度 + 狀態(tài)欄高度 this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight; this.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight; this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right; this.globalData.menuHeight = menuButtonInfo.height; } }) 復制代碼
//page.wxml <view class="nav" style="height:{{navBarHeight}}px;"> <!-- 膠囊區(qū)域 --> <view class="capsule-box" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBotton}}px;"> <view class="nav-handle"> <image class="nav-back-icon" src="/images/nav_back.png" bind:tap="navToBackLastPage"></image> <image class="nav-home-icon" src="/images/nav_home.png" bind:tap="navToHomePage"></image> </view> <view class="nav-title">導航標題</view> </view> </view> 復制代碼
// page.js const app = getApp() Page({ /** * 頁面的初始數據 */ data: { navBarHeight: app.globalData.navBarHeight,//導航欄高度 menuBotton: app.globalData.menuBotton,//導航欄距離頂部距離 menuHeight: app.globalData.menuHeight //導航欄高度 } 復制代碼
我們可能在各自的頁面實現不一樣的效果,比如在導航欄添加搜索框,日期等,這個時候我們就可以封裝一個自定義組件,大大提高我們的開發(fā)效率。
新建component
// components/navigation/index.wxml <view class="nav" style="height:{{navBarHeight}}px;"> <view class="nav-main"> <!-- 膠囊區(qū)域 --> <view class="capsule-box" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBotton}}px;left:{{menuRight}}px;" > <!-- 導航內容區(qū)域 --> <slot></slot> </view> </view> </view> 復制代碼
// components/navigation/index.wxss .nav { position: fixed; top: 0; left: 0; width: 100vw; } .nav-main { width: 100%; height: 100%; position: relative; } .nav .capsule-box { position: absolute; box-sizing: border-box; width: 100%; } 復制代碼
// components/navigation/index.js const app = getApp() Component({ /** * 組件的初始數據 */ data: { navBarHeight: app.globalData.navBarHeight, //導航欄高度 menuRight: app.globalData.menuRight, // 膠囊距右方間距(方保持左、右間距一致) menuBotton: app.globalData.menuBotton, menuHeight: app.globalData.menuHeight } }) 復制代碼
頁面配置引入該自定義組件
//index.json { "navigationStyle": "custom", "navigationBarTextStyle": "white", "usingComponents": { "navigation": "/components/Navigation/index" } } 復制代碼
頁面中使用
<!-- 自定義導航 --> <navigation> <view class="current-date"> <text>4月24日</text> </view> </navigation> 復制代碼
本文主要是寫自定義導航基礎的東西,重點在于怎么計算自定義導航的,具體的業(yè)務和樣式還需要根據自身產品來設定。如有什么問題,歡迎提出一起學習。