uni-app使用ColorUi自定义顶部标题

App.vue 引入关键Css main.css icon.css

<style>
    @import "colorui/main.css";
    @import "colorui/icon.css";
    @import "app.css"; /* 你的项目css */
    ....
</style>

App.vue 获得系统信息，必须要引入 import Vue from 'vue'，忘记的话高度不能获取设置

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
                }
            })

            Vue.prototype.ColorList = [{
                    title: '嫣红',
                    name: 'red',
                    color: '#e54d42'
                },
                {
                    title: '桔橙',
                    name: 'orange',
                    color: '#f37b1d'
                },
                {
                    title: '明黄',
                    name: 'yellow',
                    color: '#fbbd08'
                },
                {
                    title: '橄榄',
                    name: 'olive',
                    color: '#8dc63f'
                },
                {
                    title: '森绿',
                    name: 'green',
                    color: '#39b54a'
                },
                {
                    title: '天青',
                    name: 'cyan',
                    color: '#1cbbb4'
                },
                {
                    title: '海蓝',
                    name: 'blue',
                    color: '#0081ff'
                },
                {
                    title: '姹紫',
                    name: 'purple',
                    color: '#6739b6'
                },
                {
                    title: '木槿',
                    name: 'mauve',
                    color: '#9c26b0'
                },
                {
                    title: '桃粉',
                    name: 'pink',
                    color: '#e03997'
                },
                {
                    title: '棕褐',
                    name: 'brown',
                    color: '#a5673f'
                },
                {
                    title: '玄灰',
                    name: 'grey',
                    color: '#8799a3'
                },
                {
                    title: '草灰',
                    name: 'gray',
                    color: '#aaaaaa'
                },
                {
                    title: '墨黑',
                    name: 'black',
                    color: '#333333'
                },
                {
                    title: '雅白',
                    name: 'white',
                    color: '#ffffff'
                },
            ]

        },

pages.json 配置取消系统导航栏

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationStyle": "custom"
            }
        }

使用封装,在main.js 引入 cu-custom 组件。

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

index.vue 页面可以直接调用了

<cu-custom bgColor="bg-gradual-blue" :isBack="true">
    <block slot="backText">返回</block>
    <block slot="content">导航栏</block>
</cu-custom>