小程序自定义导航栏样式问题

自定义设置导航栏

• 必须在app.json中设置"navigationStyle": "custom"
• 子组件(自定义组件)无须再次配置，无用
• 可以通过定位布局强制重新赋予样式(不规范操作)
• 导航栏由状态栏与标题栏组成
• 导航栏高度由状态栏高度、标题栏高度以及两者高度差的两倍组成(两倍为了对称)

一、在app.js的onLaunch方法中全局获取导航栏相应高度

var _this = this;
wx.getSystemInfo({
  success: (res) => {
    let rect = wx.getMenuButtonBoundingClientRect();
    let gap = rect.top - res.statusBarHeight, titleH = "";
    _this.titleH = gap * 2 + rect.height;
    _this.statusBarHeight = res.statusBarHeight;
  }
})

globalData:{
  titleH:"",
  statusBarHeight:""
}

二、在自定义navBar组件页面中配置

navBar.wxml
<!-- 导航栏 -->
<view>
  <!-- 状态栏 -->
  <view style='height: {{statusBarHeight}}px;' class="state"></view> 
  <!-- 标题栏 -->
  <view style='height: {{titleHeight}}px;'  class="title"></view>
</view>

三、在自定义navBar组件事件中配置

navBar.js

var app = getApp();
Component({
  data: {
    statusBarHeight: app.statusBarHeight,
    titleHeight: app.titleH
}
})

四、页面引用navBar自定义组件

引用页面的json中配置
"usingComponents": {
  "navBar":"../navBar/navBar"
}

五、可扩展为：传参定制导航栏

****