navigationBar相信大家(jia)都(dou)不陌生把(ba)？今天我們就來說(shuo)(shuo)說(shuo)(shuo)自(zi)定義navigationBar，把(ba)它改變(bian)成我們想(xiang)要(yao)的樣子（搜(sou)索(suo)框+膠囊、搜(sou)索(suo)框+返回(hui)按(an)鈕(niu)+膠囊等(deng)）。
window全局配置里有個參數：navigationStyle（導航欄樣(yang)式），default=默認樣(yang)式，custom=自定義樣(yang)式。
"window": {
"navigationStyle": "custom"
}
復制代碼
讓我們看(kan)看(kan)隱藏(zang)后的效果：
可以看到原(yuan)生的navigationBar已(yi)經消失了，剩(sheng)下孤零零的膠囊按(an)鈕，膠囊按(an)鈕是無法隱藏的。
我們用wx.getMenuButtonBoundingClientRect() 【官方(fang)文檔】 獲取膠囊按鈕的布局位置信(xin)息(xi)，坐(zuo)標信(xin)息(xi)以(yi)屏(ping)幕(mu)左上(shang)角(jiao)為(wei)原點：
const menuButtonInfo = wx.getMenuButtonBoundingClientRect(); 復制代碼
| width | height | top | right | bottom | left |
|---|---|---|---|---|---|
| 寬度 | 高度 | 上邊界坐標 | 右邊界坐標 | 下邊界坐標 | 左邊界坐標 |
下面是官方(fang)(fang)給的示意圖，方(fang)(fang)便大家(jia)理解幾個坐標。
用(yong)wx.getSystemInfoSync() 【官方文檔】 獲取系統信息，里面(mian)有個(ge)參數：statusBarHeight（狀態欄高度），是我(wo)們(men)后面(mian)計算整(zheng)個(ge)導航欄的(de)高度需要用(yong)到的(de)。
const systemInfo = wx.getSystemInfoSync(); 復制代碼
我(wo)們先要知道導航欄(lan)(lan)高(gao)度是怎么組成(cheng)的， 計算公式： 導航欄(lan)(lan)高(gao)度 = 狀態欄(lan)(lan)到(dao)膠(jiao)囊(nang)的間距(ju)（膠(jiao)囊(nang)距(ju)上距(ju)離-狀態欄(lan)(lan)高(gao)度） * 2 + 膠(jiao)囊(nang)高(gao)度 + 狀態欄(lan)(lan)高(gao)度 。
自定義(yi)導航(hang)欄會應用(yong)到多(duo)個、甚至全(quan)部頁面，所以(yi)封裝成組件，方便調(diao)用(yong)；下面是我寫的(de)一(yi)個簡單例子：
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"
}
復制代碼
下面為組(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;}
復制代碼
以(yi)下是(shi)調(diao)用(yong)(yong)頁(ye)面(mian)的代碼，也(ye)就是(shi)引用(yong)(yong)組件的頁(ye)面(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)
}
})
復制代碼
效果圖：
，直接到開發者(zhe)工具里運(yun)行，記得(de)appid用自己的或者(zhe)測(ce)試(shi)哦！
下(xia)面附幾張其它小(xiao)程序的(de)效果圖，大家(jia)也(ye)可以嘗試照著做：
