自定义导航栏兼容ios和android

<template>
  <view class="content">
    <!-- 距离顶部的距离 刚好留出状态栏即可 即statusBarHeight -->
    <view class="topNav" :style="{height:navHeight+'px',paddingTop:statusBarHeight+'px'}">
      <view class="nav-left">
        雪天前端
      </view>
      <view class="nav-search">
        <input type="text" placeholder="请搜索" placeholder-class="placClass" />
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        navHeight: "", // 导航栏高度
        statusBarHeight: '', // 状态栏高度
      }
    },
    onLoad() {
      //获取手机系统的信息 里面有状态栏高度和设备型号
      let {
        statusBarHeight,
        system
      } = uni.getSystemInfoSync()
      // 注意返回的单位是px 不是rpx
      console.log('状态栏高度是', statusBarHeight + 'px', '设备型号是', system);
      this.statusBarHeight = statusBarHeight
      // 而导航栏的高度则 = 状态栏的高度 + 判断机型的值（是ios就+40，否则+44）
      // 这个高度刚好和胶囊对齐
      this.navHeight = statusBarHeight + (system.indexOf('iOS') > -1 ? 40 : 44)
      console.log(this.navHeight, "导航栏高度");
    },

    methods: {

    }
  }
</script>

<style scoped>
  .topNav {
    height: 100rpx;
    background-color: #00aa7f;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 20rpx;
    box-sizing: border-box;
  }

  .nav-left {
    font-size: 36rpx;
    font-weight: 600;
    color: #ffeb3b;
    margin-right: 30rpx;
    font-style: italic;
  }

  .nav-search input {
    width: 60%;
    height: 62rpx;
    border-radius: 30rpx;
    padding-left: 25rpx;
    background-color: #f0f8ffa6;
    box-sizing: border-box;
  }

  .placClass {
    font-size: 24rpx;
    color: #fff;
  }
</style>