如何實(shí)現(xiàn)微信小程序自定義navigationBar頂部導(dǎo)航欄適配所有機(jī)型

"window": {
	"navigationStyle": "custom"
}

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

const systemInfo = wx.getSystemInfoSync();

App({
 onLaunch: function(options) {
  const that = this;
  // 獲取系統(tǒng)信息
  const systemInfo = wx.getSystemInfoSync();
  // 膠囊按鈕位置信息
  const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
  // 導(dǎo)航欄高度 = 狀態(tài)欄到膠囊的間距（膠囊距上距離-狀態(tài)欄高度） * 2 + 膠囊高度 + 狀態(tài)欄高度
  that.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight;
  that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
  that.globalData.menuBotton = menuButtonInfo.top - systemInfo.statusBarHeight;
  that.globalData.menuHeight = menuButtonInfo.height;
 },
 // 數(shù)據(jù)都是根據(jù)當(dāng)前機(jī)型進(jìn)行計(jì)算，這樣的方式兼容大部分機(jī)器
 globalData: {
  navBarHeight: 0, // 導(dǎo)航欄高度
  menuRight: 0, // 膠囊距右方間距（方保持左、右間距一致）
  menuBotton: 0, // 膠囊距底部間距（保持底部間距一致）
  menuHeight: 0, // 膠囊高度（自定義內(nèi)容可與膠囊高度保證一致）
 }
})

{
 "pages": [
  "pages/index/index"
 ],
 "window": {
  "navigationStyle": "custom"
 },
 "sitemapLocation": "sitemap.json"
}

<!-- 自定義頂部欄 -->
<view class="nav-bar" >
 <input class="search" placeholder="輸入關(guān)鍵詞！" ></input>
</view>

<!-- 
 內(nèi)容區(qū)域：
 自定義頂部欄用的fixed定位，會(huì)遮蓋到下面內(nèi)容，注意設(shè)置好間距
-->
<view class="content" ></view>

{
 "component": true
}

const app = getApp()
Component({
 properties: {
  // defaultData（父頁(yè)面?zhèn)鬟f的數(shù)據(jù)-就是引用組件的頁(yè)面）
  defaultData: {
   type: Object,
   value: {
    title: "我是默認(rèn)標(biāo)題"
   },
   observer: function(newVal, oldVal) {}
  }
 },
 data: {
  navBarHeight: app.globalData.navBarHeight,
  menuRight: app.globalData.menuRight,
  menuBotton: app.globalData.menuBotton,
  menuHeight: app.globalData.menuHeight,
 },
 attached: function() {},
 methods: {}
})

.nav-bar{ position: fixed; width: 100%; top: 0; color: #fff; background: #000;}
.nav-bar .search{ width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;}

navigation-bar default-data="{{defaultData}}"></navigation-bar>

{
 "usingComponents": {
  "navigation-bar": "/components/navigation-bar/navigation-bar"
 }
}

const app = getApp();
Page({
 data: {
  // 組件參數(shù)設(shè)置，傳遞到組件
  defaultData: {
   title: "我的主頁(yè)", // 導(dǎo)航欄標(biāo)題
  }
 },
 onLoad() {
  console.log(this.data.height)
 }
})