アプレット - ナビゲーションバーをカスタマイズする方法

考え

 

カスタムナビゲーションバーの高さ：ステータスバー（緑の部分）、ナビゲーションバー（青部分）

ステータスバー

wx.getSystemInfoSyncを呼び出すことによって取得

CONST RES = wx.getSystemInfoSync（）
 この.setData（{ 
   statusBarHeight：res.statusBarHeight 
}）

ナビゲーションバー

ギャップ上下ナビゲーションバーをnavBarPadding、カプセルの右上によって計算された位置情報を取得します 

RES =せwx.getMenuButtonBoundingClientRect（）
navBarPaddingせ - =（res.top 本 * 2 .data.setStatusBarHeight） 
 この（{.setData 
   ：res.height navBarHeight + navBarPadding 
}）

コード

app.js：

アプリ（{ 
  OnLaunch（）{ 
     この.setStatusBarHeight（）
      この.setNavBar（）
  } 
  // 設定システムステータスバーの高さ
  setStatusBarHeight（）{
       試み{ 
        CONST RES = wx.getSystemInfoSync（）
         この .globalData.statusBarHeight = res.statusBarHeight 
      } キャッチ（エラー）{ 
        にconsole.log（エラー）
      } 
  } 
  // ナビゲーションバーの高さに設定
  setNavBarを（）{ 
      せRES = wx.getMenuButtonBoundingClientRect（）
      させnavBarPaddingは =（res.top - この.data.setStatusBarHeight）* 2 
       本 .globalData.navBarHeight = res.height + navBarPadding 
  }、
  グローバルデータ：{ 
    statusBarHeight： 20 、
    navBarHeight： 44 
  } 
}）

 

wxml：

< ビュークラス= "トップバーラップ" > 
    < ビュークラス= "トップバーメイン" スタイル= "パディングトップ：{{statusBarHeight}} PX;高さ：{{navBarHeight}} PX" > 
        自定义导航栏
    </ ビュー> 
</ ビュー>

wxss：

.topバーラップ { 
    z屈折率：9999。
    位置：固定 ; 
    トップ：0 ; 
    左：0 ; 
    幅：100％ ; 
} 
.topバーメイン { 
    幅：100％ 。
    表示：フレックス。
    正当化-コンテンツ：センター ; 
    ALIGN-アイテム：センター ; 
    色：#FFF ; 
}

JS：

CONSTアプリ= getApp（）
成分（{ 
  データ：{ 
    statusBarHeight：app.globalData.statusBarHeight 、
    navBarHeight：app.globalData.navBarHeight 
  } 
}）

遂に

setStatusBarHeight、setNavBarはapp.globalData良い場所を取得し、2はカスタムナビゲーションバーを使用する必要性の高さ以上にすることができ、2最良の方法のapp.jsを書きました。

たとえば、カスタムナビゲーションバーがページ全体を上に移動するので、カスタムのナビゲーションバーで非常に非常に一貫性のあるページプラスパディングトップを与える原因と、文書の流れからの測位が固定されているので、ページのカスタムナビゲーションバーを使用して、 statusBarHeight + navBarHeightいます。