前言

大部分情況下我們都是使用微信官方自帶的 navigationBar 配置 ，但有時候我們需要在導航欄整合搜尋框、自定義背景圖、返回首頁按鈕等。

思路

• 隱藏官方導航欄
• 獲取膠囊按鈕、狀態列相關資料以供後續計算
• 根據不同機型計算導航欄高度
• 編寫新的導航欄
• 頁面引用自定義導航

正文

隱藏官方導航欄

隱藏導航欄可以全域性配置，也可以單獨頁面配置，具體根據業務需求來。

全域性隱藏

//app.json
"window": {
 "navigationStyle": "custom"
}

頁面隱藏

//page.json
{
 "navigationStyle": "custom"
}

獲取膠囊按鈕、狀態列相關資料以供後續計算

公式：導航欄高度 = 狀態列到膠囊的間距（膠囊距上邊界距離-狀態列高度） * 2 + 膠囊高度 + 狀態列高度。 由公式得知，我們需要獲取 狀態列高度 膠囊高度 膠囊距上距離

注：狀態列到膠囊的間距 = 膠囊到下邊界距離。所以這裡需要*2

狀態列高度

用 wx.getSystemInfoSync() 官方API 可以獲取系統相關資訊， statusBarHeight 屬性可以獲取到狀態列高度

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 () {
 // 獲取系統資訊
 const systemInfo = wx.getSystemInfoSync();
 // 膠囊按鈕位置資訊
 const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
 // 導航欄高度 = 狀態列到膠囊的間距（膠囊距上距離-狀態列高度） * 2 + 膠囊高度 + 狀態列高度
 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;">
 <!-- 膠囊區域 -->
 <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 //導航欄高度
 }

封裝成元件

我們可能在各自的頁面實現不一樣的效果，比如在導航欄新增搜尋框，日期等，這個時候我們就可以封裝一個自定義元件，大大提高我們的開發效率。

新建component

// components/navigation/index.wxml
<view class="nav" style="height:{{navBarHeight}}px;">
 <view class="nav-main">
 <!-- 膠囊區域 -->
 <view 
  class="capsule-box" 
  style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBotton}}px;left:{{menuRight}}px;"
 >
 <!-- 導航內容區域 -->
  <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>

總結

本文主要是寫自定義導航基礎的東西，重點在於怎麼計算自定義導航的，具體的業務和樣式還需要根據自身產品來設定。如有什麼問題，歡迎提出一起學習。

到此這篇關於小程式自定義導航欄相容適配所有機型（附完整案例）的文章就介紹到這了,更多相關小程式自定義導航欄內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！