小程序 自定义单页面头部导航栏（标题栏）

写在前：自定义头部标题栏，并封装引用到需要的页面。

---

实现单页面可用自定义头部（未封装）

首先：根据小程序文档 顶配置项  在需要自定义的页面的json文件中添加下面的配置

{
  "navigationStyle": "custom"
}

其次：为适配各手机顶部状态栏高度高度不同，动态获取高度并存放在全局变量中（放到app.js中）

App({
  onLaunch: function() {

  },
  globalData: {
    statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],
  }
})

之后：布局，（注：因为浮动的元素不占位置，所以用空标签来占位置，当然也可以清除浮动的元素带来的影响） 

<view class="topbar" style="padding-top:{
  {statusBarHeight}}px">
  <view class="arrow-box row">
    <image src="../image/mine_back.png"></image>
  </view>
  <view class="input-box row">
    <input placeholder="请输入你想找的内容" />
  </view>
</view>
<view class="top-comend" style="padding-top:{
  {statusBarHeight}}px"></view>
<view>这是测