封装微信小程序顶部导航栏，自适应各种手机屏幕

已更新！！
根据当前需求封装的，ios标题居中，安卓上靠左，可能有点垃圾，希望给位指正
首先要在封装的page.json文件下写入:

"navigationStyle":"custom",

在app.js中定义全局获取顶部高度

创建导航栏组件navigation（名字自定义）

// 获取屏幕参数
    try {
    
    
      const res = wx.getSystemInfoSync()
      if (res.platform == 'ios') {
    
    
        _this.globalData.platform = 'ios'
      } else if (res.platform == 'android') {
    
    
        _this.globalData.platform = 'android'
      }
      let navHeight = res.statusBarHeight
      _this.globalData.screenWidth = res.screenWidth
      _this.globalData.screenHeight = res.screenHeight
      _this.globalData.statusBarHeight = res.statusBarHeight
      _this.globalData.pixelRatio = res.pixelRatio
      _this.globalData.winWidth = res.windowWidth
      if (res.system.indexOf('Android') !== -1) {
    
    
        _this.globalData.navHeight = navHeight + 14 + 32
        _this.globalData.navTitleTop = navHeight + 8
        _this.globalData.winHeight = res.screenHeight - navHeight - 14 - 32
        _this.globalData.winHeightTab = res.windowHeight - navHeight - 14 - 32
      } else {
    
    
        _this.globalData.navHeight = navHeight + 12 + 32
        _this.globalData.navTitleTop = navHeight + 4
        _this.globalData.winHeight = res.screenHeight - navHeight - 12 - 32
        _this.globalData.winHeightTab = res.windowHeight - navHeight - 12 - 32
      }
      // console.log(wx.getSystemInfoSync(), _this.globalData.winHeightTab)
    } catch (e) {
    
    
      // console.log(e)
    }

在globalData中定义

 globalData: {
    
    
    navHeight: 64, //手机顶部高度
    navTitleTop: 26,//手机顶部top值
    platform: 'ios',//手机型号
 }

navigate组件中的内容

<view>
  <view class="nav-bar {
    
    {isWhite=='true'?'nav-bar-white':''}}"
    style="height: {
    
    {navHeight}}px;background-color:{
    
    {navColor}};" catchtap="toTop">
  <text class="navbar-title"
      style="top:{
    
    {navTitleTop}}px;color:{
    
    {navTitleColor}};{
    
    {phoneType == 'android' ? 'width:auto;text-algin:left;left:9%;':'font-weight:bolder;'}}">{
    
    {
    
    title}}</text>
    <view wx:if="{
    
    {returnStatus}}" catchtap="returnClick"
      class="navbar-icon-wrap" style="top:{
    
    {navTitleTop}}px;" data-returnstatus="{
    
    {returnStatus}}"
      data-pageStack="{
    
    {pageStack}}" data-returnStatusContent="{
    
    {returnStatusContent}}" data-special="{
    
    {special}}">
      <image class="navbar-icon" src="../../assets/images/return.png" mode="widthFix"></image>
    </view>
  </view>
</view>

/* component/navigateion/navigateion.wxss */
.box {
    
    
  height: 178rpx;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 28rpx 19rpx;
  box-sizing: border-box;
  font-size: 30rpx;
  /* padding-bottom: 18rpx; */
  position: relative;
  background: #fff;
}

.box-imagebox {
    
    
  position: absolute;
  left: 6rpx;
  bottom: 25rpx;
  width: 100rpx;
  height: 100rpx;
  /* background-color: red; */
}

.box image {
    
    
  width: 32rpx;
  /* height: 42rpx; */
  position: absolute;
  left: 6px;
  bottom: 7rpx;
}

.nav-bar {
    
    
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999999;
}

.nav-bar-white {
    
    
  background-color: #fff;
}

.navbar-title {
    
    
  position: absolute;
  height: 64rpx;
  line-height: 64rpx;
  /* width: 100%; */
  width: 320rpx;
  text-align: center;

  font-size: 32rpx;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  left: 28%;
}

.navbar-icon-wrap {
    
    
  position: absolute;
  left: 3px;
  width: 70rpx;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar-icon {
    
    
  width: 16px;
  height: 32rpx;
}

.navbar-scan {
    
    
  width: 28px;
  height: 28px;
}

const app = getApp()
Component({
    
    
  properties: {
    
    
    // 标题
    title: {
    
    
      type: String,
      value: ''
    }, 
    // 发起页面路径
    pageStack: {
    
    
      type: String,
      value: ''
    },
    returnStatus: {
    
    
      type: String,
      value: ''
    },
    returnStatusContent: {
    
    
      type: String,
      value: ''
    },
    special: {
    
    
      type: String,
      value: ''
    },
    navHeight: {
    
    
      type: Number,
      value: 20
    },
    navTitleTop: {
    
    
      type: Number,
      value: 26
    },
    navTitleColor: {
    
     // 导航标题颜色 默认黑色
      type: String,
      value: '#000'
    },
    isWhite: {
    
     // 是否为白底
      type: String,
      value: 'true'
    },
 }
 data: {
    
    
    navHeight: 0,
    navTitleTop: 0,
    phoneType: app.globalData.platform,
  },
 attached() {
    
    
    // 在组件实例进入页面节点树时执行
    // 获取顶部导航高度
    this.setData({
    
    
      navHeight: app.globalData.navHeight,
      navTitleTop: app.globalData.navTitleTop,
      phoneType: app.globalData.platform,
    })
  },
})

使用页面中的page.json

"usingComponents": {
    
    
 
    "navigateion-bar" : "../../../component/navigateion/navigateion"

  },

使用页面的page.wxml

<navigateion-bar title='添加银行卡' pageStack="{
    
    {pageStack}}" returnStatus="true"/>