ColorUI

前言

ColorUI是一个css库！！！在你引入样式后可以根据class来调用组件，一些含有交互的操作我也有简单写，可以为你开发提供一些思路。插件市场版本如果和更新日志不一样，请移步Github下载。有组件需求或者Bug提交也可以移步到issues。

交流

微信群：加入微信群请先添加开发者微信，备注UniApp插件市场。

素材

ColorUI在语雀有个群友共同在维护的知识库，里面有一些群友改的模板和UI素材供开发使用哦！

开始使用

下载源码解压，复制根目录的 /colorui 文件夹到你的根目录

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

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

使用自定义导航栏

导航栏作为常用组件有做简单封装，当然你也可以直接复制代码结构自己修改，达到个性化目的。

App.vue 获得系统信息

复制代码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 }
    })
},

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

复制代码"globalStyle": { "navigationStyle": "custom" },

复制代码结构可以直接使用，注意全局变量的获取。

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

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

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

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

使用自定义Tabbar

这部分暂时没有封装，思路可以参考下我的源码，原理是一个主页面引入多个页面，在主页面进行切换显示。这样可以解决切换时闪烁的问题。

ColorUI免责声明：

1、本软件及软件版权属各自产权人所有，

2、只用于个人封装技术研究交流使用，不得用于商业用途，

3、且本网站不承担任何技术及版权问题，请在试用后24小时内删除。

4、如果您对本软件有任何意见和建议，欢迎到反馈，请购买正版软件！