小程序自定义导航栏（适配不同手机）——拿来就用

• 基本思路

	写自定义导航组件的时候，需要将组件结构一分为二：状态栏 + 标题栏
	状态栏高度可通过wx.getSystemInfoSync().statusBarHeight获取
	标题栏高度：安卓：48px，iOS：44px
	单位必需跟胶囊按钮一致，用px

详细介绍请看：小程序自定义导航栏适配（完美版）这里就不详细介绍了

• 获得版本号和状态栏高度（app.wpy）

 globalData={
    statusBarHeight:0,
    toBar:44
  } 
  onLaunch() {
    let _that=this;
    wx.getSystemInfo({
      success (res) {
        _that.globalData.statusBarHeight=res.statusBarHeight;
        if(res.platform=="ios"){
           _that.globalData.toBar=44;
        }else if(res.platform=="android"){
           _that.globalData.toBar=48;
        }else{
           _that.globalData.toBar=44;
        }
      }
    })
  }

• 配置页面自定义

config = {
    navigationBarTitleText: 'test',
    navigationStyle: 'custom',
    usingComponents: {
      'van-icon': '/components/vant/icon/index'
    }
  };

• 在页面中使获取高度

data = {
    statusBarHeight:20,
    toBarHeight:44
}

onLoad() {
    this.statusBarHeight=this.$parent.globalData.statusBarHeight;
    this.toBarHeight=this.$parent.globalData.toBar;
}

• html布局

<view class="ch_top">
      <view style="height: {{statusBarHeight}}px;">view>
      <view class="tobar" style="height: {{toBarHeight}}px;">
        <view class="title" style="height: {{toBarHeight}}px;line-height: {{toBarHeight}}px;">
          <text>搜索text>
        view>
        <view class="back" @tap="onClickBack">
          <van-icon custom-class="left_custom_class" custom-style="line-height: {{toBarHeight}}px;"  name="arrow-left"/>
        view>
      view>
    view>

• css样式

  .ch_top {
    background-color: #ffdd00;
    .tobar{
      position:relative;
      .back {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        padding-left: 15rpx;
        padding-right: 15rpx;
        .left_custom_class {
          font-weight: 700;
          height: 100%;
          font-size: 36rpx;
        }
      }
      .title {
        text-align: center;
        font-weight: 700;
        font-size: 36rpx;
      }
    }
  }

• 效果

完成…