# 自定義小程序的頂部導(dǎo)航

小程序官方的topbar可能無(wú)法滿足業(yè)務(wù)需求，下面介紹如何封裝一個(gè)自定義的頂部欄

也可以在全局關(guān)閉，看自己的需求

// /pages/index/index.json
{
  "usingComponents": {
    "base-top-bar":"/components/base-top-bar/base-top-bar"
  },
  "navigationStyle":"custom"
}
復(fù)制代碼

• 
• 已知膠囊區(qū)的高度區(qū)是44px
• 不同機(jī)型的信號(hào)區(qū)高度不同，我們需要?jiǎng)討B(tài)的去改變，信號(hào)區(qū)高度通過小程序提供的api來(lái)獲得

ready(){
  /* 
  在組件的生命周期函數(shù)內(nèi) 獲取信號(hào)區(qū)的高度 這一步也可以在app.js里面獲取,來(lái)減少資源浪費(fèi)
  */

  // 獲取設(shè)備的信息  
  let systemInfo = wx.getSystemInfoSync()
  // 獲取信號(hào)區(qū)高度
  let statusBarHeight = systemInfo['statusBarHeight']

  /* 
  根據(jù)我的測(cè)驗(yàn)，實(shí)際的信號(hào)區(qū)高度在真機(jī)上表現(xiàn)與于實(shí)際的不服，所以我們這里還需要根據(jù)不同的設(shè)備進(jìn)行調(diào)整
  開發(fā)工具 = 獲取的高度
  安卓真機(jī) = 獲取的高度 + 1
  蘋果真機(jī) = 獲取的高度 - 1
  我本人這里也只測(cè)試了iPhonex 華為和小米手機(jī)，
  如果有出入根據(jù)實(shí)際情況進(jìn)行調(diào)整就行了
  */

  if (systemInfo.platform === 'andorid' ) {
    statusBarHeight = statusBarHeight+1
  }else if (systemInfo.platform === 'ios') {
    statusBarHeight = statusBarHeight-2
  }else{
    statusBarHeight = statusBarHeight
  }
  this.setData({
    statusBarHeight
  })

},
復(fù)制代碼

• wxml部分

<view class="top-bar">
  
  <view  style="height:{{statusBarHeight}}px;">
  view>
  
  <view  class="capsule-box">
    自定義的topbar
  view>
view>
復(fù)制代碼

• wxss

.top-bar {
  background-color: #fff;
}

.capsule-box {
  height: 44px;
  display: flex;
  align-items: center;
}

復(fù)制代碼

• 效果
  

到上面為止，其實(shí)我們已經(jīng)基本做完了這個(gè)組件最核心的部分 但一款功能強(qiáng)大的組件還遠(yuǎn)不止于此

• 如何自定義頁(yè)面返回鍵

因?yàn)轫?yè)面場(chǎng)景不同我們可以通過小程序的apigetCurrentPages()來(lái)獲得當(dāng)前路由的信息，來(lái)決定上一個(gè)頁(yè)面是否存在，是否為switchtab的頁(yè)面來(lái)對(duì)應(yīng)不同的路由api，甚至可以類似原生那樣顯示不同的圖標(biāo)來(lái)獲得更好的體驗(yàn)

• 微信膠囊參數(shù)?

微信膠囊 寬87px 高31px 右邊距10px 如果 然后再44px的膠囊區(qū)對(duì)其進(jìn)行垂直居中則可以形成左右對(duì)稱而達(dá)到美觀的效果

最后自定義組件的魅力在于它足夠靈活，所以的功能都需要你后面自己去開發(fā)完事