微信小程序自定义navigationBar顶部导航栏适配所有

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

const menuButtonInfo = wx.getMenuButtonBoundingClientRect();

const systemInfo = wx.getSystemInfoSync();

App({
 onLaunch: function(options) {
  const that = this;
  // 获取系统信息
  const systemInfo = wx.getSystemInfoSync();
  // 胶囊按钮位置信息
  const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
  // 导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度）  2 + 胶囊高度 + 状态栏高度
  that.globalData.navBarHeight = (menuButtonInfo. - systemInfo.statusBarHeight)  2 + menuButtonInfo.height + systemInfo.statusBarHeight;
  that.globalData.menuRight = systemInfo.screenWidth - menuButtonInfo.right;
  that.globalData.menuBotton = menuButtonInfo. - systemInfo.statusBarHeight;
  that.globalData.menuHeight = menuButtonInfo.height;
 },
 // 数据都是根据当前机型进行计算，这样的方式兼容大部分机器
 globalData: {
  navBarHeight: 0, // 导航栏高度
  menuRight: 0, // 胶囊距右方间距（方保持左、右间距一致）
  menuBotton: 0, // 胶囊距底部间距（保持底部间距一致）
  menuHeight: 0, // 胶囊高度（自定义内容可与胶囊高度保证一致）
 }
})

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

<!-- 自定义顶部栏 -->
<view class="nav-bar" style="height:{{navBarHeight}}px;">
 <input class="search" placeholder="输入关键词！" style="height:{{menuHeight}}px; min-height:{{menuHeight}}px; line-height:{menuHeight}}px; left:{{menuRight}}px; bottom:{{menuBotton}}px;"></input>
</view>

<!-- 
 内容区域
 自定义顶部栏用的fixed定位，会遮盖到狼蚁网站SEO优化内容，注意设置好间距
-->
<view class="content" style="margin-:{{navBarHeight}}px;"></view>

{
 "ponent": true
}

const app = getApp()
Component({
 properties: {
  // defaultData（父页面传递的数据-就是引用组件的页面）
  defaultData: {
   type: Object,
   value: {
    title: "我是默认标题"
   },
   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%; : 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": "/ponents/navigation-bar/navigation-bar"
 }
}

const app = getApp();
Page({
 data: {
  // 组件参数设置，传递到组件
  defaultData: {
   title: "我的主页", // 导航栏标题
  }
 },
 onLoad() {
  console.log(this.data.height)
 }
})