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

在興縣等地區(qū)，都構(gòu)建了全面的區(qū)域性戰(zhàn)略布局，加強(qiáng)發(fā)展的系統(tǒng)性、市場前瞻性、產(chǎn)品創(chuàng)新能力，以專注、極致的服務(wù)理念，為客戶提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì) 網(wǎng)站設(shè)計(jì)制作按需網(wǎng)站制作,公司網(wǎng)站建設(shè),企業(yè)網(wǎng)站建設(shè),成都品牌網(wǎng)站建設(shè),營銷型網(wǎng)站建設(shè),成都外貿(mào)網(wǎng)站制作,興縣網(wǎng)站建設(shè)費(fèi)用合理。

小程序的配置項(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)航欄組件中全部采用了<cover-view>標(biāo)簽。）：

<template>
  <div class="comp-navbar">
    <!-- 占位欄 -->
    <cover-view class="placeholder-bar" :> </cover-view>
    <!-- 導(dǎo)航欄主體 -->
    <cover-view class="navbar" :>
      <!-- 狀態(tài)欄 -->
      <cover-view class="nav-statusbar" :></cover-view>
      <!-- 標(biāo)題欄 -->
      <cover-view class="nav-titlebar" :>
        <!-- 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>
        <!-- 標(biāo)題 -->
        <cover-view class="bar-title" :>{{title}}</cover-view>
      </cover-view>
    </cover-view>
  </div>
</template>

文章標(biāo)題：詳解mpvue中小程序自定義導(dǎo)航組件開發(fā)指南-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://aaarwkj.com/article16/jccdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、營銷型網(wǎng)站建設(shè)、動態(tài)網(wǎng)站、網(wǎng)站維護(hù)、微信公眾號、網(wǎng)站設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)