使用ColorUI小程序自定义导航栏

找了各种获取屏幕高度的方法，依然不能适配iphonex，后来使用的使用的ColorUI，没用过的自行百度，不引用ColorUI的话不知道会是什么效果。
首先将ColorUI项目中app.js的这段代码复制到自己的app.js中：

//this最好改成自己声明的that，否则指针不对的话会报错
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;
		}
      }
    })

代码顺序如下：

注意，如果把wx.getSystemInfo放到this.globaData = {}上面的话就会报错，什么原因也没搞明白…
再将ColorUI项目中的这四个文件存放到自己的项目中,如图:

然后在app.json中添加如下代码：

"window": {
    "navigationStyle": "custom"//关闭自带的导航栏
  },

"usingComponents": {
    "cu-custom": "/components/custom/cu-custom"//这个引用的路径需要根据文件存放位置自行修改
},

如果你的首页不是index的话，修改cu-custom.js中的toHome，在文件最下方：

添加下面这段代码到页面就可以了：

<cu-custom bgColor="bg-gradual-white" isBack="{{false}}"><view slot="content">快付通出行（司机端）</view></cu-custom>