在小程序中自定义顶部栏组件，适配不同设备

# 自定义小程序的顶部导航

在首页的page.json中将官方导航关掉 并引入我们自定义的topbar 组件

// /pages/index/index.json
{
  "usingComponents": {
    "base-top-bar":"/components/base-top-bar/base-top-bar"
  },
  "navigationStyle":"custom"
}

获取信号区高度

• 
• 已知胶囊区的高度区是44px
• 不同机型的信号区高度不同，我们需要动态的去改变，信号区高度通过小程序提供的api来获得

ready(){
  /* 
  在组件的生命周期函数内 获取信号区的高度 这一步也可以在app.js里面获取,来减少资源浪费
  */

  // 获取设备的信息  
  let systemInfo = wx.getSystemInfoSync()
  // 获取信号区高度
  let statusBarHeight = systemInfo['statusBarHeight']

  /* 
  根据我的测验，实际的信号区高度在真机上表现与于实际的不服，所以我们这里还需要根据不同的设备进行调整
  开发工具 = 获取的高度
  安卓真机 = 获取的高度 + 1
  苹果真机 = 获取的高度 - 1
  我本人这里也只测试了iPhonex 华为和小米手机，
  如果有出入根据实际情况进行调整就行了
  */

  if (systemInfo.platform === 'andorid' ) {
    statusBarHeight = statusBarHeight+1
  }else if (systemInfo.platform === 'ios') {
    statusBarHeight = statusBarHeight-2
  }else{
    statusBarHeight = statusBarHeight
  }
  this.setData({
    statusBarHeight
  })

},

• wxml部分

<view class="top-bar">
  <!-- 信号区 -->
  <view  style="height:{{statusBarHeight}}px;">
  </view>
  <!-- 胶囊区 -->
  <view  class="capsule-box">
    自定义的topbar
  </view>
</view>

• wxss

.top-bar {
  background-color: #fff;
}

.capsule-box {
  height: 44px;
  display: flex;
  align-items: center;
}

• 效果
  

后续改造

• 如何自定义页面返回键

• 微信胶囊参数?

代码片段