小程序模板網(wǎng)

微信小程序自定義navigationBar頂部導航欄,兼容適配所有機型(附完整案例)

發(fā)布時間:2020-05-20 09:52 所屬欄目:小程序開發(fā)教程

前言

navigationBar相信大家都不陌生把?今天我們就來說說自定義navigationBar,把它改變成我們想要的樣子(搜索框+膠囊、搜索框+返回按鈕+膠囊等)。

思路

  • 隱藏原生樣式
  • 獲取膠囊按鈕、狀態(tài)欄相關數(shù)據(jù)以供后續(xù)計算
  • 根據(jù)不同機型計算出該機型的導航欄高度,進行適配
  • 編寫新的導航欄
  • 引用到頁面

正文

一、隱藏原生的navigationBar

window全局配置里有個參數(shù):navigationStyle(導航欄樣式),default=默認樣式,custom=自定義樣式。

"window": {
	"navigationStyle": "custom"
}
復制代碼

讓我們看看隱藏后的效果:

可以看到原生的navigationBar已經消失了,剩下孤零零的膠囊按鈕,膠囊按鈕是無法隱藏的。

二、準備工作

1.獲取膠囊按鈕的布局位置信息

我們用wx.getMenuButtonBoundingClientRect() 【官方文檔】 獲取膠囊按鈕的布局位置信息,坐標信息以屏幕左上角為原點:

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
復制代碼
width height top right bottom left
寬度 高度 上邊界坐標 右邊界坐標 下邊界坐標 左邊界坐標

下面是官方給的示意圖,方便大家理解幾個坐標。

2.獲取系統(tǒng)信息

用wx.getSystemInfoSync() 【官方文檔】 獲取系統(tǒng)信息,里面有個參數(shù):statusBarHeight(狀態(tài)欄高度),是我們后面計算整個導航欄的高度需要用到的。

const systemInfo = wx.getSystemInfoSync();
復制代碼

三、計算公式

我們先要知道導航欄高度是怎么組成的, 計算公式: 導航欄高度 = 狀態(tài)欄到膠囊的間距(膠囊距上距離-狀態(tài)欄高度) * 2 + 膠囊高度 + 狀態(tài)欄高度 。

實例 【源碼下載】

自定義導航欄會應用到多個、甚至全部頁面,所以封裝成組件,方便調用;下面是我寫的一個簡單例子:

app.js

App({
    onLaunch: function(options) {
        const that = this;
        // 獲取系統(tǒng)信息
        const systemInfo = wx.getSystemInfoSync();
        // 膠囊按鈕位置信息
        const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        // 導航欄高度 = 狀態(tài)欄到膠囊的間距(膠囊距上距離-狀態(tài)欄高度) * 2 + 膠囊高度 + 狀態(tài)欄高度
        that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
        that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
        that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
        that.globalData.menuHeight = menuButtonInfo.height;
    },
    // 數(shù)據(jù)都是根據(jù)當前機型進行計算,這樣的方式兼容大部分機器
    globalData: {
        navBarHeight: 0, // 導航欄高度
        menuRight: 0, // 膠囊距右方間距(方保持左、右間距一致)
        menuBotton: 0, // 膠囊距底部間距(保持底部間距一致)
        menuHeight: 0, // 膠囊高度(自定義內容可與膠囊高度保證一致)
    }
})
復制代碼

app.json

{
    "pages": [
        "pages/index/index"
    ],
    "window": {
        "navigationStyle": "custom"
    },
    "sitemapLocation": "sitemap.json"
}
復制代碼

下面為組件代碼: /components/navigation-bar/navigation-bar.wxml

<!-- 自定義頂部欄 -->
<view class="nav-bar" style="height:{{navBarHeight}}px;">
    <input class="search" placeholder="輸入關鍵詞!" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{menuHeight}}px; left:{{menuRight}}px; bottom:{{menuBotton}}px;"></input>
</view>

<!-- 
    內容區(qū)域:
    自定義頂部欄用的fixed定位,會遮蓋到下面內容,注意設置好間距
-->
<view class="content" style="margin-top:{{navBarHeight}}px;"></view>
復制代碼

/components/navigation-bar/navigation-bar.json

{
  "component": true
}
復制代碼

/components/navigation-bar/navigation-bar.js

const app = getApp()
Component({
    properties: {
        // defaultData(父頁面?zhèn)鬟f的數(shù)據(jù)-就是引用組件的頁面)
        defaultData: {
            type: Object,
            value: {
                title: "我是默認標題"
            },
            observer: function(newVal, oldVal) {}
        }
    },
    data: {
        navBarHeight: app.globalData.navBarHeight,
        menuRight: app.globalData.menuRight,
        menuBotton: app.globalData.menuBotton,
        menuHeight: app.globalData.menuHeight,
    },
    attached: function() {},
    methods: {}
})
復制代碼

/components/navigation-bar/navigation-bar.wxss

.nav-bar{ position: fixed; width: 100%; top: 0; color: #fff; background: #000;}
.nav-bar .search{ width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;}
復制代碼

以下是調用頁面的代碼,也就是引用組件的頁面: /pages/index/index.wxml

<navigation-bar default-data="{{defaultData}}"></navigation-bar>
復制代碼

/pages/index/index.json

{
    "usingComponents": {
        "navigation-bar": "/components/navigation-bar/navigation-bar"
    }
}
復制代碼

/pages/index/index.js

const app = getApp();
Page({
    data: {
        // 組件參數(shù)設置,傳遞到組件
        defaultData: {
            title: "我的主頁", // 導航欄標題
        }
    },
    onLoad() {
        console.log(this.data.height)
    }
})
復制代碼

效果圖:

好了,以上就是全部代碼了,大家可以文中復制代碼,也可以 【下載源碼】

,直接到開發(fā)者工具里運行,記得appid用自己的或者測試哦!

下面附幾張其它小程序的效果圖,大家也可以嘗試照著做:

總結

  • 本文寫了自定義navigationBar的一些基礎性東西,里面涉及組件用法、參數(shù)傳遞、導航欄相關。
  • 由于測試環(huán)境有限,大家在使用時如果發(fā)現(xiàn)有什么問題,希望及時反饋,以供及時更新幫助更多的人!


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/25229.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢