mpvue中小程式自定義導航元件開發指南

Patricklea發表於2019-02-09
Vue元件

這篇筆記主要記錄一下基於mpvue的小程式中實現自定義導航的思路及應用。分享出來拋磚引玉，如有謬誤或優化空間，歡迎交流。

小程式的配置項navigationStyle設定為custom之後，導航欄只保留右上角膠囊按鈕，顏色、標題文字內容均可以自定義，可以此實現導航欄的個性化需求，實際應用如沉浸式視訊播放頁等。

沉浸式視訊播放頁

小程式7.0.0之後的版本開始支援自定義單個頁面的導航欄，將頁面的navigationStyle設定為custom即可。mpvue的配置方式如下：

mpvue配置

由於不同作業系統、不同機型的導航欄高度是不同的，所以自定義導航欄核心要解決的問題是不同機型中導航欄高度的相容問題。

小程式導航欄

如上圖所示，導航欄一共由兩部分組成：狀態列和標題欄。狀態列就是用來展示時間、網路狀態的那一欄，全面屏（劉海螢幕）的機型中狀態列會比其他螢幕高很多：ios系統帶劉海屏的都是44，其他都為20,包括pad。 而安卓機的數值則更多。我們可以通過微信的apiwx.getSystemInfo獲取狀態列的高度（statusBarHeight）。而標題欄高度不能通過小程式api獲取到，通過同級多個機型的測試資料，我們基本可以按照ios中44px安卓中48px來算。 這樣一來就好辦了，通過statusBarHeight獲取到狀態列高度後，再判斷當前的系統加上對應的標題欄後，就可以獲取到正確的導航欄高度了。

template中的html代：（因為小程式中的video元件有著最高的層級，是不會被普通html標籤覆蓋的，所以導航欄元件中全部採用了<cover-view>標籤。）：

<template>
    <div class="comp-navbar">
        <!-- 佔位欄 -->
        <cover-view class="placeholder-bar" :style="{height: navBarHeight + 'px'}"> </cover-view>
        <!-- 導航欄主體 -->
        <cover-view class="navbar" :style="{height: navBarHeight + 'px',backgroundColor:navBackgroundColor}">
            <!-- 狀態列 -->
            <cover-view class="nav-statusbar" :style="{height: statusBarHeight + 'px'}"></cover-view>
            <!-- 標題欄 -->
            <cover-view class="nav-titlebar" :style="{height: titleBarHeight + 'px' }">
                <!-- home及後退鍵 -->
                <cover-view class="bar-options">
                    <cover-view v-if="backVisible" class="opt opt-back" @click="backClick()">
                    <cover-image class="back-image" src="/static/images/back.png"></cover-image>
                    </cover-view>
                    <cover-view class="line" v-if="backVisible && homePath"></cover-view>
                    <cover-view v-if="homePath" class="opt opt-home" @click="homeClick()">
                    <cover-image class="home-image" src="/static/images/home.png"></cover-image>
                    </cover-view>
                </cover-view>
                <!-- 標題 -->
                <cover-view class="bar-title" :style="[{color:titleColor}]">{{title}}</cover-view>
            </cover-view>
        </cover-view>
    </div>
</template>

複製程式碼

js程式碼：

    beforeMount() {
        const self = this;
        wx.getSystemInfo({
            success(system) {
                console.log(`system:`, system);
                self.statusBarHeight = system.statusBarHeight;
                self.platform = system.platform;

                let platformReg = /ios/i;
                if (platformReg.test(system.platform)) {
                    self.titleBarHeight = 44;
                } else {
                    self.titleBarHeight = 48;
                }

                self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
            }
        });
    },
複製程式碼

自定義導航欄的可自定義內容：標題文字、文字顏色、標題欄背景色、回退按鈕是否顯示、home按鈕的地址。示例程式碼如下：

<navigation-bar :title="videoTitle"
    :navBackgroundColor="'pink'"
    :titleColor="'green'"
    :back-visible="true"
    :home-path="'/pages/index/main'"></navigation-bar>
複製程式碼

最後奉上github地址，歡迎檢閱程式碼，歡迎star。

相關文章