這篇文章主要講解了小程序自定義導(dǎo)航欄兼容適配所有機(jī)型的實(shí)現(xiàn)方法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。
成都創(chuàng)新互聯(lián)專注于洛寧網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供洛寧營(yíng)銷型網(wǎng)站建設(shè)，洛寧網(wǎng)站制作、洛寧網(wǎng)頁(yè)設(shè)計(jì)、洛寧網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)公司服務(wù)，打造洛寧網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供洛寧網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。
前言
大部分情況下我們都是使用微信官方自帶的 navigationBar 配置 ，但有時(shí)候我們需要在導(dǎo)航欄集成搜索框、自定義背景圖、返回首頁(yè)按鈕等。
思路
正文
隱藏官方導(dǎo)航欄
隱藏導(dǎo)航欄可以全局配置，也可以單獨(dú)頁(yè)面配置，具體根據(jù)業(yè)務(wù)需求來(lái)。
全局隱藏
重慶分公司
重慶分公司
//app.json
"window": {
"navigationStyle": "custom"
}頁(yè)面隱藏
//page.json
{
"navigationStyle": "custom"
}獲取膠囊按鈕、狀態(tài)欄相關(guān)數(shù)據(jù)以供后續(xù)計(jì)算
公式：導(dǎo)航欄高度 = 狀態(tài)欄到膠囊的間距（膠囊距上邊界距離-狀態(tài)欄高度） * 2 + 膠囊高度 + 狀態(tài)欄高度。 由公式得知，我們需要獲取 狀態(tài)欄高度 膠囊高度 膠囊距上距離
注：狀態(tài)欄到膠囊的間距 = 膠囊到下邊界距離。所以這里需要*2
狀態(tài)欄高度
用 wx.getSystemInfoSync() 官方API 可以獲取系統(tǒng)相關(guān)信息， statusBarHeight 屬性可以獲取到狀態(tài)欄高度
const statusBarHeight = wx.getSystemInfoSync().statusBarHeight;
膠囊高度和膠囊距上邊界距離
用 wx.getMenuButtonBoundingClientRect() 官方API 可以獲取菜單按鈕膠囊按鈕的布局位置信息。
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();//膠囊相關(guān)信息 const menuButtonHeight = menuButtonInfo.height //膠囊高度 const menuButtonTop = menuButtonInfo.top//膠囊距上邊界距離
實(shí)例
一般情況下，我們需要在運(yùn)用啟動(dòng)的初始化生命周期鉤子進(jìn)行計(jì)算相關(guān)的數(shù)據(jù)，也就是入口文件 app.js 的 onLaunch 生命周期鉤子
//app.js
App({
onLaunch: function () {
this.setNavBarInfo()
},
globalData: {
//全局?jǐn)?shù)據(jù)管理
navBarHeight: 0, // 導(dǎo)航欄高度
menuBotton: 0, // 膠囊距底部間距（保持底部間距一致）
menuRight: 0, // 膠囊距右方間距（方保持左、右間距一致）
menuHeight: 0, // 膠囊高度（自定義內(nèi)容可與膠囊高度保證一致）
},
/**
* @description 設(shè)置導(dǎo)航欄信息
*/
setNavBarInfo () {
// 獲取系統(tǒng)信息
const systemInfo = wx.getSystemInfoSync();
// 膠囊按鈕位置信息
const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
// 導(dǎo)航欄高度 = 狀態(tài)欄到膠囊的間距（膠囊距上距離-狀態(tài)欄高度） * 2 + 膠囊高度 + 狀態(tài)欄高度
this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
this.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
this.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
this.globalData.menuHeight = menuButtonInfo.height;
}
})頁(yè)面引用自定義導(dǎo)航
//page.wxml導(dǎo)航標(biāo)題
// page.js
const app = getApp()
Page({
/**
* 頁(yè)面的初始數(shù)據(jù)
*/
data: {
navBarHeight: app.globalData.navBarHeight,//導(dǎo)航欄高度
menuBotton: app.globalData.menuBotton,//導(dǎo)航欄距離頂部距離
menuHeight: app.globalData.menuHeight //導(dǎo)航欄高度
}封裝成組件
我們可能在各自的頁(yè)面實(shí)現(xiàn)不一樣的效果，比如在導(dǎo)航欄添加搜索框，日期等，這個(gè)時(shí)候我們就可以封裝一個(gè)自定義組件，大大提高我們的開發(fā)效率。
新建component
// components/navigation/index.wxml
// components/navigation/index.wxss
.nav {
position: fixed;
top: 0;
left: 0;
width: 100vw;
}
.nav-main {
width: 100%;
height: 100%;
position: relative;
}
.nav .capsule-box {
position: absolute;
box-sizing: border-box;
width: 100%;
}// components/navigation/index.js
const app = getApp()
Component({
/**
* 組件的初始數(shù)據(jù)
*/
data: {
navBarHeight: app.globalData.navBarHeight, //導(dǎo)航欄高度
menuRight: app.globalData.menuRight, // 膠囊距右方間距（方保持左、右間距一致）
menuBotton: app.globalData.menuBotton,
menuHeight: app.globalData.menuHeight
}
})頁(yè)面引用
頁(yè)面配置引入該自定義組件
//index.json
{
"navigationStyle": "custom",
"navigationBarTextStyle": "white",
"usingComponents": {
"navigation": "/components/Navigation/index"
}
}頁(yè)面中使用
4月24日
看完上述內(nèi)容，是不是對(duì)小程序自定義導(dǎo)航欄兼容適配所有機(jī)型的實(shí)現(xiàn)方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
