uni-app中引入 color-ui 这是一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值，高度自定义的Css组件库.

当你按如下流程走完了，你会发现 color-ui 的导航栏可以用了，其他的使用方法直接按照color-ui的dome 引入就行了（不需要在注册组件了，直接复制代码，重点css样式必须引入）

1. 下载color-ui 源码解压，复制根目录的/colorui 文件夹到你的根目录
2.App.vue 引入关键的css main.css icon.css

		<style>
	
		/*每个页面公共css */ 
	
		@import 'colorui/main.css';
	
		@import 'colorui/icon.css';
	
		</style>

3.使用自定义导航栏通过App.vue 获取系统信息

		<script>
	
		import Vue from 'vue' 
	
		export default {
	
		  onLaunch: function() {
	
		    uni.getSystemInfo({
	
		      success: function(e) {
	
		        // #ifndef MP 
	
		        Vue.prototype.StatusBar = e.statusBarHeight 
	
		        if (e.platform == 'android') {
	
		          Vue.prototype.CustomBar = e.statusBarHeight + 50 
	
		        } else {
	
		          Vue.prototype.CustomBar = e.statusBarHeight + 45 
	
		        }
	
		        // #endif 
	
		        // #ifdef MP-WEIXIN 
	
		        Vue.prototype.StatusBar = e.statusBarHeight 
	
		        let custom = wx.getMenuButtonBoundingClientRect()
	
		        Vue.prototype.Custom = custom 
	
		        Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight 
	
		        // #endif 
	
		        // #ifdef MP-ALIPAY 
	
		        Vue.prototype.StatusBar = e.statusBarHeight 
	
		        Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight 
	
		        // #endif 
	
		      }
	
		    })
	
		  },
	
		  onShow: function() {
	
		    console.log('App Show')
	
		  },
	
		  onHide: function() {
	
		    console.log('App Hide')
	
		  }
	
		}
	
		</script>

4.在pages.json 配置取消系统导航栏 navigationStyle：custom

		    "globalStyle": {
	
		        "navigationBarTextStyle": "black",
	
		        "navigationBarTitleText": "uni-app",
	
		        "navigationBarBackgroundColor": "#F8F8F8",
	
		        "backgroundColor": "#F8F8F8",
	
		        "navigationStyle": "custom" 
	
		    }

5.复制代码结构可以直接使用，注意全局变量的获取
使用封装，在main.js 引入 cu-custom 组件

		import cuCustom from './colorui/components/cu-custom.vue' 
	
		Vue.component('cu-custom',cuCustom)

6.在index.vue 页面直接调用导航栏

		<template>
	
		  <view class="content">
	
		    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
	
		      <block slot="backText">返回</block>
	
		      <block slot="content">导航栏</block>
	
		    </cu-custom>
	
		  </view>
	
		</template>
	
		<script>
	
		export default {
	
		  data() {
	
		    return {}
	
		  },
	
		  onLoad() {},
	
		  methods: {}
	
		}
	
		</script>
	
		<style></style>