前言

navigationBar相信大家(jia)都(dou)不陌生(sheng)把？今天我們(men)就(jiu)來說說自(zi)定(ding)義navigationBar，把它改變成我們(men)想要(yao)的樣子（搜索框+膠囊、搜索框+返(fan)回(hui)按鈕+膠囊等(deng)）。

思路

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

正文

一、隱藏原生的navigationBar

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

"window": {
	"navigationStyle": "custom"
}
復制代碼

讓(rang)我們看(kan)看(kan)隱藏后的效果(guo)：

可以看到原生(sheng)的navigationBar已經消失了，剩下孤零零的膠(jiao)囊(nang)按(an)鈕，膠(jiao)囊(nang)按(an)鈕是無法(fa)隱(yin)藏的。

二、準備工作

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

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

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
復制代碼

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

2.獲取系統信息

用wx.getSystemInfoSync() 【官方(fang)文檔】 獲取系統(tong)信息，里(li)面(mian)有個參(can)數：statusBarHeight（狀態欄高(gao)(gao)度），是我們后面(mian)計算整個導(dao)航欄的高(gao)(gao)度需要用到的。

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

三、計算公式

我們先(xian)要知道導航(hang)欄(lan)高度是怎么組成的， 計算公式： 導航(hang)欄(lan)高度 = 狀(zhuang)態欄(lan)到膠(jiao)囊(nang)的間距(ju)（膠(jiao)囊(nang)距(ju)上距(ju)離(li)-狀(zhuang)態欄(lan)高度） * 2 + 膠(jiao)囊(nang)高度 + 狀(zhuang)態欄(lan)高度 。

實例 【源碼下載】

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

app.js

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

app.json

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

下(xia)面為組(zu)件(jian)代碼： /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>

<!-- 
    內容區域：
    自定義頂部欄用的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（父頁面傳遞的數據-就是引用組件的頁面）
        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;}
復制代碼

以下是(shi)調用頁面(mian)的代碼，也(ye)就(jiu)是(shi)引(yin)用組件的頁面(mian)： /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: {
        // 組件參數設置，傳遞到組件
        defaultData: {
            title: "我的主頁", // 導航欄標題
        }
    },
    onLoad() {
        console.log(this.data.height)
    }
})
復制代碼

效果圖：

，直接到開發者工具里運行(xing)，記得(de)appid用(yong)自(zi)己的或者測試哦！

下面(mian)附幾張其它(ta)小程序的(de)效果圖(tu)，大家也可以(yi)嘗試照(zhao)著(zhu)做(zuo)：

總結

• 本文寫了自定義navigationBar的一些基礎性東西，里面涉及組件用法、參數傳遞、導航欄相關。
• 由于測試環境有限，大家在使用時如果發現有什么問題，希望及時反饋，以供及時更新幫助更多的人！