這篇筆記主要記錄一下基于mpvue的小程序中實(shí)現(xiàn)自定義導(dǎo)航的思路及應(yīng)用。分享出來拋磚引玉，如有謬誤或優(yōu)化空間，歡迎交流。

為順河等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及順河網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為做網(wǎng)站、網(wǎng)站制作、順河網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

小程序的配置項(xiàng)navigationStyle設(shè)置為custom之后，導(dǎo)航欄只保留右上角膠囊按鈕，顏色、標(biāo)題文字內(nèi)容均可以自定義，可以此實(shí)現(xiàn)導(dǎo)航欄的個(gè)性化需求，實(shí)際應(yīng)用如沉浸式視頻播放頁等。

小程序7.0.0之后的版本開始支持自定義單個(gè)頁面的導(dǎo)航欄，將頁面的navigationStyle設(shè)置為custom即可。mpvue的配置方式如下：

由于不同操作系統(tǒng)、不同機(jī)型的導(dǎo)航欄高度是不同的，所以自定義導(dǎo)航欄核心要解決的問題是不同機(jī)型中導(dǎo)航欄高度的兼容問題。

如上圖所示，導(dǎo)航欄一共由兩部分組成：狀態(tài)欄和標(biāo)題欄。狀態(tài)欄就是用來展示時(shí)間、網(wǎng)絡(luò)狀態(tài)的那一欄，全面屏（劉海屏幕）的機(jī)型中狀態(tài)欄會比其他屏幕高很多：ios系統(tǒng)帶劉海屏的都是44，其他都為20,包括pad。 而安卓機(jī)的數(shù)值則更多。我們可以通過微信的apiwx.getSystemInfo獲取狀態(tài)欄的高度（statusBarHeight）。而標(biāo)題欄高度不能通過小程序api獲取到，通過同級多個(gè)機(jī)型的測試數(shù)據(jù)，我們基本可以按照ios中44px安卓中48px來算。
這樣一來就好辦了，通過statusBarHeight獲取到狀態(tài)欄高度后，再判斷當(dāng)前的系統(tǒng)加上對應(yīng)的標(biāo)題欄后，就可以獲取到正確的導(dǎo)航欄高度了。

template中的html代：（因?yàn)樾〕绦蛑械膙ideo組件有著最高的層級，是不會被普通html標(biāo)簽覆蓋的，所以導(dǎo)航欄組件中全部采用了標(biāo)簽。）：

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;
      }
    });
  },

自定義導(dǎo)航欄的可自定義內(nèi)容：標(biāo)題文字、文字顏色、標(biāo)題欄背景色、回退按鈕是否顯示、home按鈕的地址。示例代碼如下：

最后奉上github地址，歡迎檢閱代碼，歡迎star。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。