這篇文章主要為大家展示了如何實現微信小程序自定義navigationBar頂部導航欄適配所有機型，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
前言
navigationBar相信大家都不陌生把？今天我們就來說說自定義navigationBar，把它改變成我們想要的樣子（搜索框+膠囊、搜索框+返回按鈕+膠囊等）。
思路
正文
一、隱藏原生的navigationBar
window全局配置里有個參數：navigationStyle（導航欄樣式），default=默認樣式，custom=自定義樣式。
"window": {
"navigationStyle": "custom"
}讓我們看看隱藏后的效果：
可以看到原生的navigationBar已經消失了，剩下孤零零的膠囊按鈕，膠囊按鈕是無法隱藏的。
二、準備工作
1.獲取膠囊按鈕的布局位置信息
我們用wx.getMenuButtonBoundingClientRect() 【官方文檔】 獲取膠囊按鈕的布局位置信息，坐標信息以屏幕左上角為原點：
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
| width | height | top | right | bottom | left |
|---|---|---|---|---|---|
| 寬度 | 高度 | 上邊界坐標 | 右邊界坐標 | 下邊界坐標 | 左邊界坐標 |
下面是官方給的示意圖，方便大家理解幾個坐標。
2.獲取系統信息
用wx.getSystemInfoSync() 【官方文檔】 獲取系統信息，里面有個參數：statusBarHeight（狀態欄高度），是我們后面計算整個導航欄的高度需要用到的。
const systemInfo = wx.getSystemInfoSync();
三、計算公式
我們先要知道導航欄高度是怎么組成的， 計算公式： 導航欄高度 = 狀態欄到膠囊的間距（膠囊距上距離-狀態欄高度） * 2 + 膠囊高度 + 狀態欄高度 。
實例 【源碼下載】
自定義導航欄會應用到多個、甚至全部頁面，所以封裝成組件，方便調用；下面是我寫的一個簡單例子：
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"
}下面為組件代碼： /components/navigation-bar/navigation-bar.wxml
<!-- 自定義頂部欄 --> <view class="nav-bar" > <input class="search" placeholder="輸入關鍵詞！" ></input> </view> <!-- 內容區域： 自定義頂部欄用的fixed定位，會遮蓋到下面內容，注意設置好間距 --> <view class="content" ></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;}以下是調用頁面的代碼，也就是引用組件的頁面： /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)
}
})效果圖：
好了，以上就是全部代碼了，大家可以文中復制代碼，也可以 【下載源碼】
，直接到開發者工具里運行，記得appid用自己的或者測試哦！
下面附幾張其它小程序的效果圖，大家也可以嘗試照著做：
以上就是關于如何實現微信小程序自定義navigationBar頂部導航欄適配所有機型的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
