大部分情(qing)況下(xia)我們(men)都是使用微(wei)信官方自帶(dai)的 navigationBar 配置(zhi) ，但有(you)時候(hou)我們(men)需要在導航(hang)欄集(ji)成(cheng)搜索框、自定義背景圖、返回(hui)首頁(ye)按鈕等。

思路

• 隱藏官方(fang)導航欄

• 獲取膠囊按鈕、狀態欄相關(guan)數據(ju)以(yi)供后續計(ji)算

• 根(gen)據不同機型計算導(dao)航欄高度

• 編寫新的(de)導航欄

• 頁(ye)面引用自定義(yi)導航

正文

隱藏官方導航欄

隱藏導航(hang)欄可以全局配(pei)置，也可以單獨(du)頁面配(pei)置，具體(ti)根據業務(wu)需求來。

全局隱藏

//app.json
"window": {
   "navigationStyle": "custom"
}
復制代碼

頁面隱藏

//page.json
{
  "navigationStyle": "custom"
}
復制代碼

獲取膠囊按鈕、狀態欄相關數據以供后續計算

公式：導航欄高(gao)度(du) = 狀(zhuang)態欄到(dao)膠(jiao)(jiao)囊的間距(ju)（膠(jiao)(jiao)囊距(ju)上(shang)邊(bian)界距(ju)離(li)-狀(zhuang)態欄高(gao)度(du)） * 2 + 膠(jiao)(jiao)囊高(gao)度(du) + 狀(zhuang)態欄高(gao)度(du)。 由公式得(de)知，我(wo)們需要獲取 狀(zhuang)態欄高(gao)度(du) 膠(jiao)(jiao)囊高(gao)度(du) 膠(jiao)(jiao)囊距(ju)上(shang)距(ju)離(li)

注(zhu)：狀態欄(lan)到(dao)膠(jiao)囊的間距 = 膠(jiao)囊到(dao)下邊(bian)界距離。所以這里需要*2

狀態欄高度

用(yong) wx.getSystemInfoSync() 官(guan)方API 可以(yi)獲(huo)取系統(tong)相關信息， statusBarHeight 屬性可以(yi)獲(huo)取到狀態欄(lan)高度

const statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
復制代碼

膠囊高度和膠囊距上邊界距離

用 wx.getMenuButtonBoundingClientRect() 官方API 可以獲取菜單按鈕膠囊(nang)按鈕的(de)布局位置信息。

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();//膠囊相關信息
const menuButtonHeight = menuButtonInfo.height //膠囊高度
const menuButtonTop = menuButtonInfo.top//膠囊距上邊界距離
復制代碼

實例

一般(ban)情(qing)況下，我們需要(yao)在(zai)運用啟動的(de)初始(shi)化生命(ming)周期鉤子進行計算(suan)相關的(de)數(shu)據，也就是(shi)入(ru)口文件 app.js 的(de) onLaunch 生命(ming)周期鉤子

//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 //導航欄高度
  }

復制代碼

封裝成組件

我們可能(neng)在各自的(de)(de)頁面實現不一(yi)樣的(de)(de)效果(guo)，比如在導(dao)航欄(lan)添加搜索框，日期等，這個時(shi)候我們就(jiu)可以封裝一(yi)個自定義組件，大大提高我們的(de)(de)開(kai)發效率(lv)。

新建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
  }
})
復制代碼

頁面引用

頁面配(pei)置引入該自定義(yi)組(zu)件

//index.json
{
  "navigationStyle": "custom",
  "navigationBarTextStyle": "white",
  "usingComponents": {
    "navigation": "/components/Navigation/index"
  }
}
復制代碼

頁面中使用

<!-- 自定義導航 -->
<navigation>
  <view class="current-date">
     <text>4月24日</text>
  </view>
</navigation>
復制代碼

總結

本文主要(yao)是寫自(zi)定(ding)義(yi)導航基礎的(de)東西，重點(dian)在于怎么計算自(zi)定(ding)義(yi)導航的(de)，具體的(de)業(ye)務和(he)樣(yang)式還需要(yao)根據自(zi)身產品來設定(ding)。如有(you)什么問題，歡(huan)迎提(ti)出一起學習。