小程序自定義導(dǎo)航欄兼容適配所有機(jī)型（附完整案例）
前言
大部分情況下我們都是使用微信官方自帶的 navigationBar 配置 ，但有時(shí)候我們需要在導(dǎo)航欄集成搜索框、自定義背景圖、返回首頁按鈕等。
思路
- 隱藏官方導(dǎo)航欄
- 獲取膠囊按鈕、狀態(tài)欄相關(guān)數(shù)據(jù)以供后續(xù)計(jì)算
- 根據(jù)不同機(jī)型計(jì)算導(dǎo)航欄高度
- 編寫新的導(dǎo)航欄
- 頁面引用自定義導(dǎo)航
正文
隱藏官方導(dǎo)航欄
隱藏導(dǎo)航欄可以全局配置，也可以單獨(dú)頁面配置，具體根據(jù)業(yè)務(wù)需求來。
全局隱藏
//app.json
"window": {
"navigationStyle": "custom"
}
頁面隱藏
//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;
}
})
頁面引用自定義導(dǎo)航
//page.wxml
<view class="nav" style="height:{{navBarHeight}}px;">
<!-- 膠囊區(qū)域 -->
<view class="capsule-box" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBotton}}px;">
<view class="nav-handle">
<image class="nav-back-icon" src="/images/nav_back.png" bind:tap="navToBackLastPage"></image>
<image class="nav-home-icon" src="/images/nav_home.png" bind:tap="navToHomePage"></image>
</view>
<view class="nav-title">導(dǎo)航標(biāo)題</view>
</view>
</view>
// page.js
const app = getApp()
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
navBarHeight: app.globalData.navBarHeight,//導(dǎo)航欄高度
menuBotton: app.globalData.menuBotton,//導(dǎo)航欄距離頂部距離
menuHeight: app.globalData.menuHeight //導(dǎo)航欄高度
}
封裝成組件
我們可能在各自的頁面實(shí)現(xiàn)不一樣的效果，比如在導(dǎo)航欄添加搜索框，日期等，這個(gè)時(shí)候我們就可以封裝一個(gè)自定義組件，大大提高我們的開發(fā)效率。
新建component
// components/navigation/index.wxml
<view class="nav" style="height:{{navBarHeight}}px;">
<view class="nav-main">
<!-- 膠囊區(qū)域 -->
<view
class="capsule-box"
style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{{menuHeight}}px; bottom:{{menuBotton}}px;left:{{menuRight}}px;"
>
<!-- 導(dǎo)航內(nèi)容區(qū)域 -->
<slot></slot>
</view>
</view>
</view>
// 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
}
})
頁面引用
頁面配置引入該自定義組件
//index.json
{
"navigationStyle": "custom",
"navigationBarTextStyle": "white",
"usingComponents": {
"navigation": "/components/Navigation/index"
}
}
頁面中使用
<!-- 自定義導(dǎo)航 --> <navigation> <view class="current-date"> <text>4月24日</text> </view> </navigation>
總結(jié)
本文主要是寫自定義導(dǎo)航基礎(chǔ)的東西，重點(diǎn)在于怎么計(jì)算自定義導(dǎo)航的，具體的業(yè)務(wù)和樣式還需要根據(jù)自身產(chǎn)品來設(shè)定。如有什么問題，歡迎提出一起學(xué)習(xí)。
到此這篇關(guān)于小程序自定義導(dǎo)航欄兼容適配所有機(jī)型（附完整案例）的文章就介紹到這了,更多相關(guān)小程序自定義導(dǎo)航欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Javascript調(diào)用函數(shù)方法的幾種方式介紹
這篇文章主要介紹了Javascript調(diào)用函數(shù)方法的幾種方式介紹,本文講解了func()、(function(arg){})(window)、func.bind(sth)()、func.call()、func.apply()等5種方式,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JavaScript通過事件代理高亮顯示表格行的方法,涉及javascript事件代理及頁面元素的操作技巧,需要的朋友可以參考下2015-05-05
單例模式的定義是：保證一個(gè)類僅有一個(gè)實(shí)例，并提供一個(gè)訪問它的全局訪問點(diǎn)。文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
本文給大家分享一段實(shí)例代碼介紹JS判斷時(shí)間段的方法，需要的朋友參考下吧2017-06-06
js獲取某月的最后一天日期的簡單實(shí)例，需要的朋友可以參考一下2013-06-06
深入理解JavaScript中的尾調(diào)用(Tail Call)
尾調(diào)用（Tail Call）是函數(shù)式編程的一個(gè)重要概念，下面這篇文章主要給大家深入的介紹了關(guān)于JavaScript中尾調(diào)用的相關(guān)資料，文中介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考價(jià)值，有需要的朋友們下面來一起看看吧。2017-02-02
近日，在做項(xiàng)目中，需要做到滾動(dòng)條滑到某個(gè)位置時(shí)，才能顯示動(dòng)畫，網(wǎng)上查詢到有個(gè)wow.js可以達(dá)到要求，現(xiàn)在把使用方法做如下總結(jié)，需要的朋友參考下吧2017-09-09
微信小程序五子棋游戲AI實(shí)現(xiàn)方法【附demo源碼下載】
這篇文章主要介紹了微信小程序五子棋游戲AI實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了五子棋游戲中人機(jī)對(duì)戰(zhàn)的AI原理及相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2019-02-02
用js實(shí)現(xiàn)判斷當(dāng)前網(wǎng)址的來路如果不是指定的來路就跳轉(zhuǎn)到指定頁面
用js實(shí)現(xiàn)判斷當(dāng)前網(wǎng)址的來路如果不是指定的來路就跳轉(zhuǎn)到指定頁面，需要的朋友可以參考下。2011-05-05
這篇文章主要為大家詳細(xì)介紹了小程序自定義彈框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11