如果需要自定義導(dǎo)航欄并且適配所有手機(jī)型號(hào)就得知道導(dǎo)航欄的高度，而導(dǎo)航欄的高度是由手機(jī)設(shè)備狀態(tài)欄的高度、膠囊的高度、膠囊距離狀態(tài)欄的上下邊距，這三者之和才是真正的導(dǎo)航欄的高度。

如果你在小程序中自定義了導(dǎo)航欄，這時(shí)候你需要在標(biāo)簽欄中使用粘性布局，不管是使用Vant UI組件庫(kù)中的sticky屬性或者van-sticky組件還是用CSS的position：sticky屬性都無(wú)法達(dá)到預(yù)期的效果，原因是默認(rèn)將top的值設(shè)置為了0像素，這就需要將top的值設(shè)置為導(dǎo)航欄的高度，先來(lái)看一張圖：

由此可知，導(dǎo)航欄的高度=狀態(tài)欄的高度+膠囊的高度+膠囊的上下邊距 x 2

那么怎么拿到不同型號(hào)手機(jī)的狀態(tài)欄高度和膠囊高度以及膠囊的上下邊距呢？

狀態(tài)欄的高度和膠囊信息可以使用微信自定義的方法wx.getSystemInfo()和wx.getMenuButtonBoundingClientRect()獲取，分別得到如下信息：

由第一張圖可知狀態(tài)欄(statusBarHeight)的高度是44,由第二張圖可知膠囊的高度（height)是32，top是膠囊頂部距離屏幕頂部的距離，那么膠囊距離狀態(tài)欄的上邊距就是top值減去狀態(tài)欄的高度，也就是48 - 44 = 4，那么上下邊距加起來(lái)就是4 x 2 = 8,所以整個(gè)導(dǎo)航欄的高度就是：statusBarHeight + height + (top - statusBarHeight) x 2,即 44 + 32 + ( 48 - 44 ) x 2 = 88px

當(dāng)然不同的手機(jī)型號(hào)會(huì)得到不同的值。

四、具體用法

根據(jù)需求如果需要在多個(gè)頁(yè)面中使用就可以在app.js中調(diào)用以上兩種方法并賦值

//獲取系統(tǒng)信息
    wx.getSystemInfo({
      success: res => {
        this.system = res
      }
    })
//獲取膠囊信息
   this.menu = wx.getMenuButtonBoundingClientRect()

然后在具體某個(gè)頁(yè)面的js文件中獲取值：

//獲取應(yīng)用實(shí)例
const app = getApp();
Page({
    data: {
        navHeight: ((app.menu.top - app.system.statusBarHeight) * 2 + app.menu.height + app.system.statusBarHeight + 1), //導(dǎo)航欄高度
    }
})

之后可以在wxss文件中設(shè)置樣式：

.tabs_title{
    position: sticky;
    z-index: 99999;
}

top值在wxml中用模板語(yǔ)法綁定：

    class="tabs_title" style="top: {{navHeight}}px">
        <scroll-view scroll-x="true">
           ......
        scroll-view>
    </view>

大功告成，這樣既可以在微信小程序中使用自定義導(dǎo)航欄也可以使用粘性布局了。大家也可以自行封裝組件以備在多個(gè)頁(yè)面中用到或者日后使用。