小程序自定義導(dǎo)航欄兼容適配所有機(jī)型(附完整案例)
前言
大部分情況下我們都是使用微信官方自帶的 navigationBar
配置 ,但有時(shí)候我們需要在導(dǎo)航欄集成搜索框、自定義背景圖、返回首頁(yè)按鈕等。
思路
- 隱藏官方導(dǎo)航欄
- 獲取膠囊按鈕、狀態(tài)欄相關(guān)數(shù)據(jù)以供后續(xù)計(jì)算
- 根據(jù)不同機(jī)型計(jì)算導(dǎo)航欄高度
- 編寫新的導(dǎo)航欄
- 頁(yè)面引用自定義導(dǎo)航
正文
隱藏官方導(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 <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({ /** * 頁(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 <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 } })
頁(yè)面引用
頁(yè)面配置引入該自定義組件
//index.json { "navigationStyle": "custom", "navigationBarTextStyle": "white", "usingComponents": { "navigation": "/components/Navigation/index" } }
頁(yè)面中使用
<!-- 自定義導(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)品來(lái)設(shè)定。如有什么問題,歡迎提出一起學(xué)習(xí)。
到此這篇關(guān)于小程序自定義導(dǎo)航欄兼容適配所有機(jī)型(附完整案例)的文章就介紹到這了,更多相關(guān)小程序自定義導(dǎo)航欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Knockout結(jié)合Bootstrap創(chuàng)建動(dòng)態(tài)UI實(shí)現(xiàn)產(chǎn)品列表管理
這篇文章主要為大家詳細(xì)介紹了Knockout結(jié)合Bootstrap創(chuàng)建動(dòng)態(tài)UI實(shí)現(xiàn)產(chǎn)品列表管理,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09前端開發(fā)必配置 html5shiv.js和respond.min.js的作用說明(bootstrap做IE低版
這篇文章主要介紹了前端開發(fā)必配置 html5shiv.js和respond.min.js的作用說明,需要的朋友可以參考下2023-05-05JS實(shí)現(xiàn)的JSON數(shù)組去重算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)的JSON數(shù)組去重算法,結(jié)合實(shí)例形式分析了javascript針對(duì)json數(shù)組的遍歷、判斷實(shí)現(xiàn)去重復(fù)功能相關(guān)操作技巧,需要的朋友可以參考下2018-04-04微信小程序?qū)崙?zhàn)之頂部導(dǎo)航欄(選項(xiàng)卡)(1)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崙?zhàn)之頂部導(dǎo)航欄的相關(guān)代碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04TypeError document.getElementById(...) is null錯(cuò)誤原因
這篇文章主要介紹了TypeError document.getElementById(...) is null錯(cuò)誤原因,這是很容易犯的一個(gè)低級(jí)錯(cuò)誤,需要的朋友可以參考下2015-05-05用戶引導(dǎo)插件driverjs的基本使用以及彈窗樣式修改方法
Driver.js是一個(gè)強(qiáng)大的、輕量級(jí)、使用原生JavaScript引擎開發(fā)的庫(kù),用于在頁(yè)面聚焦用戶的關(guān)注點(diǎn),下面這篇文章主要介紹了用戶引導(dǎo)插件driverjs的基本使用以及彈窗樣式修改方法,需要的朋友可以參考下2024-04-04基于JavaScript實(shí)現(xiàn)文本一鍵復(fù)制和長(zhǎng)按復(fù)制功能
本文主要內(nèi)容分三部分,第一部分是需求分析,第二部分是實(shí)現(xiàn)步驟,第三部分是問題詳解,如果您只需要解決問題,請(qǐng)閱讀第一、二部分即可,如果您有更多時(shí)間,進(jìn)一步學(xué)習(xí)問題相關(guān)知識(shí)點(diǎn),請(qǐng)閱讀至第三部分2023-10-10