小程序自定义头部

相关头部设置

小程序全局配：小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。

页面配置：每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。

由于自定义头部为白色时，状态栏时间、电量等需要设置为黑色。

微信版本7.0.0以上支持单个页面进行头部配置，6.6.0以上只支持全局头部配置。

由于7.0以上版本太高，也可以理解成目前微信小程序不支持单个页面设置，一旦在要决定使用自定义导航栏，那么每个页面都需要设置，为了方便我就将其写成了一个组件。

自定义头部组件

获取头部高度

wx.getSystemInfo获取系统信息，将自定义头部高度放到全局变量中

 wx.getSystemInfo({
      success: res => {
        // 单位rpx
        this.globalData.headerHeight = res.statusBarHeight / ( res.windowWidth / 750 ) + 88; 
        // 单位px
        this.globalData.headerHeight = res.statusBarHeight + 46; 
      }
 })

不同的手机型号头部那条栏目高度可能不一致，为保证自定义头部内容部分和右上角胶囊按钮对齐，头部高度为状态栏高度（px可以转化为rpx）加上一个定值（单位rpx）。

可配置属性

由于头部显示有多种风格，组件navbar加入可配置属性的入口

• bgStyle：头部背景颜色
• titleStyle： 头部字体颜色
• title： 头部标题
• isHome： 是否有搜索框
• …

判断页面栈

通过 getCurrentPages() 获取当前的页面栈，通过wx.navigateBack()关闭当前页面，返回上一页面或多级页面。

ready: function () {
    this.setData({
      currentPage: getCurrentPages().length > 1
    })
  } 

如果getCurrentPages().length大于1，该页面存在返回，则显示返回箭头。

头部加入占位

自定义头部脱离文档流，fixed定位，flex布局。

._nav {
  width: 100%;
  height: 88rpx;
  position: fixed;
  display: flex;
  align-items: center;
  flex-direction: row;
} 

由于**微信小程序的页面较多，每一个页面添加头部后页面结构都需要调整，这样相当复杂，因此加入占位，占位在文档流中，高度和自定义头部高度一致。

• 后续正常文档流和relative定位（定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在）的元素布局不需要改变
• 绝对定位的元素最好在外包一层相对定位的父元素
• 如果绝对定位的父元素是当前页面，需要引入头部高度这个全局变量，加入行内样式