微信小程序自定义导航栏（顶部&&底部）

结合colourUi来自定义顶部和底部导航栏组件

1、自定义顶部

// 获取系统状态栏信息
wx.getSystemInfo({
  success: e => {
    this.globalData.StatusBar = e.statusBarHeight;    //手机状态栏高度
    let capsule = wx.getMenuButtonBoundingClientRect();
    if (capsule) {
     	this.globalData.Custom = capsule;              //保存胶囊信息
    	this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;   //菜单栏高度
    } else {
    	this.globalData.CustomBar = e.statusBarHeight + 50;
    }
  }
})

2、自定义底部
通过计算函数 calc 覆盖原来高度

{
	height: calc(60px(假设值) + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
	height: calc(60px(假设值) + env(safe-area-inset-bottom));      /* 兼容 iOS >= 11.2 */
}