微信小程序自定義navigationBar頂部導航欄適配所有機型（附完整案例）

更新時間：2020年04月26日 09:22:38 作者：FaxMiao

這篇文章主要介紹了微信小程序自定義navigationBar頂部導航欄適配所有機型（附完整案例），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

navigationBar相信大家都不陌生把？今天我們就來說說自定義navigationBar，把它改變成我們想要的樣子（搜索框+膠囊、搜索框+返回按鈕+膠囊等）。

思路

隱藏原生樣式
獲取膠囊按鈕、狀態(tài)欄相關數(shù)據(jù)以供后續(xù)計算
根據(jù)不同機型計算出該機型的導航欄高度，進行適配
編寫新的導航欄
引用到頁面

正文

一、隱藏原生的navigationBar

window全局配置里有個參數(shù)：navigationStyle（導航欄樣式），default=默認樣式，custom=自定義樣式。

"window": {
	"navigationStyle": "custom"
}

讓我們看看隱藏后的效果：

可以看到原生的navigationBar已經(jīng)消失了，剩下孤零零的膠囊按鈕，膠囊按鈕是無法隱藏的。

二、準備工作

1.獲取膠囊按鈕的布局位置信息

我們用wx.getMenuButtonBoundingClientRect() 【官方文檔】獲取膠囊按鈕的布局位置信息，坐標信息以屏幕左上角為原點：

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

width	height	top	right	bottom	left
寬度	高度	上邊界坐標	右邊界坐標	下邊界坐標	左邊界坐標

下面是官方給的示意圖，方便大家理解幾個坐標。

2.獲取系統(tǒng)信息

用wx.getSystemInfoSync() 【官方文檔】獲取系統(tǒng)信息，里面有個參數(shù)：statusBarHeight（狀態(tài)欄高度），是我們后面計算整個導航欄的高度需要用到的。

const systemInfo = wx.getSystemInfoSync();

三、計算公式

我們先要知道導航欄高度是怎么組成的，計算公式：導航欄高度 = 狀態(tài)欄到膠囊的間距（膠囊距上距離-狀態(tài)欄高度） * 2 + 膠囊高度 + 狀態(tài)欄高度。

實例【源碼下載】

自定義導航欄會應用到多個、甚至全部頁面，所以封裝成組件，方便調用；下面是我寫的一個簡單例子：

app.js

App({
 onLaunch: function(options) {
  const that = this;
  // 獲取系統(tǒng)信息
  const systemInfo = wx.getSystemInfoSync();
  // 膠囊按鈕位置信息
  const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
  // 導航欄高度 = 狀態(tài)欄到膠囊的間距（膠囊距上距離-狀態(tài)欄高度） * 2 + 膠囊高度 + 狀態(tài)欄高度
  that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
  that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
  that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
  that.globalData.menuHeight = menuButtonInfo.height;
 },
 // 數(shù)據(jù)都是根據(jù)當前機型進行計算，這樣的方式兼容大部分機器
 globalData: {
  navBarHeight: 0, // 導航欄高度
  menuRight: 0, // 膠囊距右方間距（方保持左、右間距一致）
  menuBotton: 0, // 膠囊距底部間距（保持底部間距一致）
  menuHeight: 0, // 膠囊高度（自定義內容可與膠囊高度保證一致）
 }
})

app.json

{
 "pages": [
  "pages/index/index"
 ],
 "window": {
  "navigationStyle": "custom"
 },
 "sitemapLocation": "sitemap.json"
}

下面為組件代碼： /components/navigation-bar/navigation-bar.wxml

<!-- 自定義頂部欄 -->
<view class="nav-bar" style="height:{{navBarHeight}}px;">
 <input class="search" placeholder="輸入關鍵詞！" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{menuHeight}}px; left:{{menuRight}}px; bottom:{{menuBotton}}px;"></input>
</view>

<!-- 
 內容區(qū)域：
 自定義頂部欄用的fixed定位，會遮蓋到下面內容，注意設置好間距
-->
<view class="content" style="margin-top:{{navBarHeight}}px;"></view>

/components/navigation-bar/navigation-bar.json

{
 "component": true
}

/components/navigation-bar/navigation-bar.js

const app = getApp()
Component({
 properties: {
  // defaultData（父頁面?zhèn)鬟f的數(shù)據(jù)-就是引用組件的頁面）
  defaultData: {
   type: Object,
   value: {
    title: "我是默認標題"
   },
   observer: function(newVal, oldVal) {}
  }
 },
 data: {
  navBarHeight: app.globalData.navBarHeight,
  menuRight: app.globalData.menuRight,
  menuBotton: app.globalData.menuBotton,
  menuHeight: app.globalData.menuHeight,
 },
 attached: function() {},
 methods: {}
})

/components/navigation-bar/navigation-bar.wxss

.nav-bar{ position: fixed; width: 100%; top: 0; color: #fff; background: #000;}
.nav-bar .search{ width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;}

以下是調用頁面的代碼，也就是引用組件的頁面： /pages/index/index.wxml

navigation-bar default-data="{{defaultData}}"></navigation-bar>

/pages/index/index.json

{
 "usingComponents": {
  "navigation-bar": "/components/navigation-bar/navigation-bar"
 }
}

/pages/index/index.js

const app = getApp();
Page({
 data: {
  // 組件參數(shù)設置，傳遞到組件
  defaultData: {
   title: "我的主頁", // 導航欄標題
  }
 },
 onLoad() {
  console.log(this.data.height)
 }
})

效果圖：