前言

微信小程序憑借著“不占內(nèi)存，即用即走”等特點(diǎn)，加上微信的社交的屬性，其用戶量一路保持快速的增長。對(duì)其的應(yīng)用要求也日漸增高，使用更多樣化、個(gè)性化。其中，對(duì)頂部導(dǎo)航的自定義實(shí)現(xiàn)，因交互功能成了一個(gè)普遍需要實(shí)現(xiàn)的組件，而尤因其不同設(shè)備下樣式的兼容問題 如何更優(yōu)雅的實(shí)現(xiàn) 使其成為大家討論的熱點(diǎn)。

下面我們從對(duì)其的設(shè)計(jì)、實(shí)現(xiàn)、使用上進(jìn)行詳細(xì)闡述，讓大家更加了解這個(gè)組件。原創(chuàng)文章，若有寫的不妥之處，歡迎大家指出更正。

自定義導(dǎo)航的設(shè)計(jì)

界面設(shè)計(jì)

目前，大多小程序?qū)ψ远x導(dǎo)航的設(shè)計(jì)是：標(biāo)題居中；左側(cè)膠囊包裹返回上一頁按鈕和到首頁按鈕，要和右側(cè)系統(tǒng)默認(rèn)膠囊樣式布局一致。效果如下：

功能設(shè)計(jì)

主要功能如下：

1. 自定義 小程序 頂部導(dǎo)航 ：微信版本號(hào) <7 的無此功能
2. 去首頁 功能 ：首頁沒有此功能
3. 返回 功能：無上一頁沒有此功能
4. 模擬系統(tǒng)默認(rèn)樣式：和系統(tǒng)默認(rèn)右邊膠囊樣式保持一致
5. 居中顯示標(biāo)題：字?jǐn)?shù)過多時(shí) 省略號(hào)代替

詳細(xì)實(shí)現(xiàn)

布局樣式實(shí)現(xiàn)

這個(gè)組件的實(shí)現(xiàn)的主要的重點(diǎn)在于不同設(shè)備上的樣式兼容。由于右側(cè)膠囊在不同設(shè)備下的表現(xiàn)是不一樣的，所以左側(cè)膠囊的布局樣式要隨不同設(shè)備進(jìn)行自適應(yīng)，既左側(cè)膠囊的高度間距等樣式數(shù)據(jù)要先計(jì)算出來再賦予其值。故難點(diǎn)就在于如何獲得這些值。經(jīng)過一番針對(duì)個(gè)別手機(jī)的兼容踩坑操作（此處省略一萬字...😢），最終得到正解（此處感謝小伙伴的雪中送炭🙏），那就是可以一勞永逸的wx.getMenuButtonBoundingClientRect()

wx.getMenuButtonBoundingClientRect()
獲取菜單按鈕（右上角膠囊按鈕）的布局位置信息。坐標(biāo)信息以屏幕左上角為原點(diǎn)。
菜單按鈕的布局位置信息：
width  寬度(px)
height  高度(px)
top  上邊界坐標(biāo)(px)
right  右邊界坐標(biāo)(px)
bottom  下邊界坐標(biāo)(px)
left  左邊界坐標(biāo)(px)

有了這個(gè)關(guān)鍵點(diǎn)，下面帶著大家看具體如何一步步優(yōu)雅地完美地實(shí)現(xiàn)這個(gè)組件。

首先獲取布局信息對(duì)象：

let menuRect = wx.getMenuButtonBoundingClientRect()

1、實(shí)現(xiàn)左側(cè)膠囊

獲取左側(cè)膠囊的高度：

this.height_capsule = menuRect.height

賦值給view :

<view class="nav_capsule" style="height:{{height_capsule}}px">

然后，對(duì)膠囊內(nèi)部采用flex對(duì)其進(jìn)行布局及一些細(xì)節(jié)處理，膠囊的單獨(dú)實(shí)現(xiàn)就完成了。

2、實(shí)現(xiàn)左側(cè)膠囊與右側(cè)膠囊對(duì)齊

在其外包一層父級(jí)view，即導(dǎo)航條。對(duì)導(dǎo)航條進(jìn)行與右側(cè)一樣的上邊距和下邊距填充。

<view class="navbar" style="padding-top: {{paddingTop}}px; padding-bottom: {{paddingBottom}}px;">

獲取邊距值：

this.paddingTop = menuRect.top
this.paddingBottom = menuRect.top - wepy.getSystemInfoSync().statusBarHeight

這樣，此時(shí)對(duì)齊效果就實(shí)現(xiàn)了。

3、自定義標(biāo)題垂直水平居中

我們對(duì)導(dǎo)航條內(nèi)部進(jìn)行flex布局，由于右側(cè)膠囊是系統(tǒng)默認(rèn)的，要使標(biāo)題塊居中，就需要做一個(gè)右側(cè)膠囊占位，同時(shí)給導(dǎo)航左右設(shè)置那邊距。

導(dǎo)航左右設(shè)置內(nèi)邊距：

padding-left:20rpx;
padding-right:20rpx;

右側(cè)膠囊占位：

<view class="nav_right" style="height: {{height_capsule}}px; width: {{width_capsule}}px;"></view>
this.width_capsule = menuRect.width

此時(shí)，標(biāo)題塊就處于居中的位置了。然后對(duì)齊進(jìn)行垂直水平居中和省略號(hào)控制就好了。

4、完善導(dǎo)航條布局樣式

上面，一個(gè)自定義導(dǎo)航條的樣式布局就基本完成。但要達(dá)到可以很優(yōu)雅地被使用還是需要一些完善的。

-設(shè)置定位：使其被任意頁面調(diào)用都處于視窗最頂部固定不變的位置。

position: fixed;top: 0;

設(shè)置層級(jí)：使其被任意頁面調(diào)用都處于頁面中最高層級(jí)視窗的最前面。

z-index: 99999;

增加占位塊：使其使其被任意頁面調(diào)用都不會(huì)遮擋其他頁面元素。

<view class="placeholder" wx:if="{{navbar.flag}}" style="height:{{height}}px"></view>
this.height = menuRect.bottom + this.paddingBottom;
.placeholder{width: 100%;}

然后，用一個(gè)view包裹navbar和placeholder，就是一個(gè)完善的自定義導(dǎo)航條了。

功能實(shí)現(xiàn)

1、顯示自定義小程序頂部導(dǎo)航

自定義導(dǎo)航，需要在單個(gè)頁面中設(shè)置參數(shù)：

config = { navigationStyle: "custom" };

，由于在對(duì)局部頁面進(jìn)行自定義時(shí)，

客戶端 7.0.0 以下版本，navigationStyle 只在 app.json 中生效。

所以，我們要對(duì)版本進(jìn)行兼容判斷，是否顯示自定義導(dǎo)航。

this.navbar.flag = wx.getSystemInfoSync().version.split('.')[0] >= 7 ? true : false
<view class="navbar-box" wx:if="{{navbar.flag}}">

2、顯示返回上一頁按鈕

如果沒有上一頁，就不需要返回上一頁功能：

this.showBack = getCurrentPages().length > 1 ? true : false
<button class="nav_back" @tap="navBack" wx:if="{{showBack}}">

如果此按鈕不顯示，只剩下去首頁按鈕，分割線也要隱藏掉：

<view class="divide" wx:if="{{showBack}}"></view>

到此，一個(gè)自定義導(dǎo)航組件就完整地實(shí)現(xiàn)了。還在為兼容或者調(diào)用時(shí)需要適配很多的問題而一籌莫展的童鞋，看到這兒是不是可以展顏了呀。完整代碼呈現(xiàn)如下：

github分享：github.com/linger777/x…

gitee分享：gitee.com/linger777/x…

小程序片段分享：developers.weixin.qq.com/s/AzGaZTmV7…

有需要的童鞋自取。下面給大家介紹下如何使用：

使用說明

定義頁面自定義頂部導(dǎo)航

config = { navigationStyle: "custom" };

引入組件

import navbar from '@/components/navbarNew'

注冊(cè)組件

components = {navbar, }

調(diào)用組件

<navbar :navbar.sync="navbar"></navbar>

賦值

 data = {
  navbar: {
   flag: true, //是否使用navbar
   title: '頂部導(dǎo)航', // 自定義導(dǎo)航標(biāo)題
   height: '' // 導(dǎo)航高度
  },
 }

如頁面遇到有 sticky \ fixed 定位的view，按需要可以通過加入style進(jìn)行調(diào)整

style="top: {{navbar.flag ? navbar.height : 0}}rpx;"

以上就是對(duì)自定義頂部導(dǎo)航的全部分享，如有不解，歡迎留言討論。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論