本文首發(fā)自個(gè)人自有博客：【FaxMiao個(gè)人博客】，一個(gè)關(guān)注Web前端開發(fā)技術(shù)、關(guān)注用戶體驗(yàn)、記錄前端點(diǎn)滴，堅(jiān)持更多原創(chuàng)，為大家提供高質(zhì)量技術(shù)博文！

前言

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

思路

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

正文

一、隱藏原生的navigationBar

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

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

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

image

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

二、準(zhǔn)備工作

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

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

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

下面是官方給的示意圖，方便大家理解幾個(gè)坐標(biāo)。

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

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

const systemInfo = wx.getSystemInfoSync();

三、計(jì)算公式

我們先要知道導(dǎo)航欄高度是怎么組成的，
計(jì)算公式：導(dǎo)航欄高度 = 狀態(tài)欄高度 + 44。

實(shí)例 【源碼下載】

自定義導(dǎo)航欄會(huì)應(yīng)用到多個(gè)、甚至全部頁(yè)面，所以封裝成組件，方便調(diào)用；下面是我寫的一個(gè)簡(jiǎn)單例子：

app.js

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

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="輸入關(guān)鍵詞！" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; left:{{menuRight}}px; top:{{menuTop}}px;"></input>
</view>

<!-- 占位，高度與頂部欄一樣 -->
<view style="height:{{navBarHeight}}px;"></view>

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

{
  "component": true
}

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

const app = getApp()
Component({
    properties: {
        // defaultData（父頁(yè)面?zhèn)鬟f的數(shù)據(jù)-就是引用組件的頁(yè)面）
        defaultData: {
            type: Object,
            value: {
                title: "我是默認(rèn)標(biāo)題"
            },
            observer: function(newVal, oldVal) {}
        }
    },
    data: {
        navBarHeight: app.globalData.navBarHeight,
        menuRight: app.globalData.menuRight,
        menuTop: app.globalData.menuTop,
        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;}

以下是調(diào)用頁(yè)面的代碼，也就是引用組件的頁(yè)面：
/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ù)設(shè)置，傳遞到組件
        defaultData: {
            title: "我的主頁(yè)", // 導(dǎo)航欄標(biāo)題
        }
    },
    onLoad() {
        console.log(this.data.height)
    }
})

效果圖：

好了，以上就是全部代碼了，大家可以文中復(fù)制代碼，也可以【下載源碼】，直接到開發(fā)者工具里運(yùn)行，記得appid用自己的或者測(cè)試哦！

下面附幾張其它小程序的效果圖，大家也可以嘗試照著做：

image

image

總結(jié)

• 本文寫了自定義navigationBar的一些基礎(chǔ)性東西，里面涉及組件用法、參數(shù)傳遞、導(dǎo)航欄相關(guān)。
• 由于測(cè)試環(huán)境有限，大家在使用時(shí)如果發(fā)現(xiàn)有什么問(wèn)題，希望及時(shí)反饋，以供及時(shí)更新幫助更多的人！
• 大家有什么疑問(wèn)，歡迎評(píng)論區(qū)留言！