小程序組件—自定義頂部導航

微信小程序憑藉着「不佔內存，即用即走」等特色，加上微信的社交的屬性，其用戶量一路保持快速的增加。對其的應用要求也日漸增高，使用更多樣化、個性化。其中，對頂部導航的自定義實現，因交互功能成了一個廣泛須要實現的組件，而尤因其不一樣設備下樣式的兼容問題 如何更優雅的實現 使其成爲你們討論的熱點。

下面咱們從對其的設計、實現、使用上進行詳細闡述，讓你們更加了解這個組件。原創文章，如有寫的不妥之處，歡迎你們指出更正。

自定義導航的設計

界面設計

目前，大多小程序對自定義導航的設計是：標題居中；左側膠囊包裹返回上一頁按鈕和到首頁按鈕，要和右側系統默認膠囊樣式佈局一致。效果以下：

功能設計

主要功能以下：

1. 自定義 小程序 頂部導航 ：微信版本號 <7 的無此功能
2. 去首頁 功能 ：首頁沒有此功能
3. 返回 功能：無上一頁沒有此功能
4. 模擬系統默認樣式：和系統默認右邊膠囊樣式保持一致
5. 居中顯示標題：字數過多時 省略號代替。默認是相對於屏幕居中，兼容相對於左右膠囊居中。

詳細實現

佈局樣式實現

這個組件的實現的主要的重點在於不一樣設備上的樣式兼容。因爲右側膠囊在不一樣設備下的表現是不同的，因此左側膠囊的佈局樣式要隨不一樣設備進行自適應，既左側膠囊的高度間距等樣式數據要先計算出來再賦予其值。故難點就在於如何得到這些值。通過一番針對個別手機的兼容踩坑操做（此處省略一萬字...😢），最終獲得正解（此處感謝小夥伴的雪中送炭🙏），那就是能夠一勞永逸的wx.getMenuButtonBoundingClientRect()

wx.getMenuButtonBoundingClientRect() 獲取菜單按鈕（右上角膠囊按鈕）的佈局位置信息。座標信息以屏幕左上角爲原點。 菜單按鈕的佈局位置信息： width 寬度(px) height 高度(px) top 上邊界座標(px) right 右邊界座標(px) bottom 下邊界座標(px) left 左邊界座標(px)

有了這個關鍵點，下面帶着你們看具體如何一步步優雅地完美地實現這個組件。 首先獲取佈局信息對象：

let menuRect = wx.getMenuButtonBoundingClientRect()
複製代碼

一、實現左側膠囊 獲取左側膠囊的高度：

this.height_capsule = menuRect.height
複製代碼

賦值給view :

<view class="nav_capsule" style="height:{{height_capsule}}px">
複製代碼

而後，對膠囊內部採用flex對其進行佈局及一些細節處理，膠囊的單獨實現就完成了。 二、實現左側膠囊與右側膠囊對齊 在其外包一層父級view，即導航條。對導航條進行與右側同樣的上邊距和下邊距填充。

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

獲取邊距值：

this.paddingTop = menuRect.top
this.paddingBottom = menuRect.top - wepy.getSystemInfoSync().statusBarHeight
複製代碼

這樣，此時對齊效果就實現了。 三、自定義標題垂直水平居中 咱們對導航條內部進行flex佈局，因爲右側膠囊是系統默認的，要使標題塊居中，就須要作一個右側膠囊佔位，同時給導航左右設置那邊距。 導航左右設置內邊距：

padding-left:20rpx;
padding-right:20rpx;
複製代碼

右側膠囊佔位：

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

此時，標題塊就處於居中的位置了。而後對齊進行垂直水平居中和省略號控制就行了。 四、完善導航條佈局樣式 上面，一個自定義導航條的樣式佈局就基本完成。但要達到能夠很優雅地被使用仍是須要一些完善的。 -設置定位：使其被任意頁面調用都處於視窗最頂部固定不變的位置。

position: fixed;top: 0;
複製代碼

設置層級：使其被任意頁面調用都處於頁面中最高層級視窗的最前面。

z-index: 99999;
複製代碼

增長佔位塊：使其使其被任意頁面調用都不會遮擋其餘頁面元素。

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

複製代碼

而後，用一個view包裹navbar和placeholder，就是一個完善的自定義導航條了。

功能實現

一、顯示自定義小程序頂部導航 自定義導航，須要在單個頁面中設置參數：

config = { navigationStyle: "custom" };
複製代碼

，因爲在對局部頁面進行自定義時，

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

因此，咱們要對版本進行兼容判斷，是否顯示自定義導航。

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

二、顯示返回上一頁按鈕 若是沒有上一頁，就不須要返回上一頁功能：

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

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

<view class="divide" wx:if="{{showBack}}"></view>
複製代碼

到此，一個自定義導航組件就完整地實現了。還在爲兼容或者調用時須要適配不少的問題而束手無策的童鞋，看到這兒是否是能夠展顏了呀。完整代碼呈現以下： github分享：github.com/linger777/x… gitee分享：gitee.com/linger777/x… 小程序片斷分享：developers.weixin.qq.com/s/AzGaZTmV7… 有須要的童鞋自取。下面給你們介紹下如何使用：

使用說明

0. 定義頁面自定義頂部導航

config = { navigationStyle: "custom" };
複製代碼

1. 引入組件

import navbar from '@/components/navbarNew'
複製代碼

2. 註冊組件

components = {navbar, }
複製代碼

3. 調用組件

<navbar :navbar.sync="navbar"></navbar>
複製代碼

4. 賦值

data = {
        navbar: {
            flag: true, //是否使用navbar
            title: '頂部導航', // 自定義導航標題
            height: '', // 導航高度
            titleStyle: 'screen' //1：標題在左右膠囊間居中; 2: 標題相對屏幕居中。默認是2
        },
    }
複製代碼

5. 如頁面遇到有 sticky \ fixed 定位的view，按須要能夠經過加入style進行調整

style="top: {{navbar.flag ? navbar.height : 0}}rpx;"
複製代碼

以上就是對自定義頂部導航的所有分享，若有不解，歡迎留言討論。