【源码】基于UniApp框架的ColorUI组件库

项目简介

ColorUI是基于UniApp框架的CSS库，主要用于快速开发跨平台移动应用。开发者引入其样式文件后，可通过class调用组件，大大简化开发流程。同时，库中提供了丰富的UI素材和示例，有助于开发者开展个性化开发。

项目的主要特性和功能

1. 丰富组件：提供导航栏、Tabbar、列表、表单等常用UI组件，满足移动应用基本需求。
2. 可定制：支持自定义导航栏和Tabbar，开发者能按需进行个性化定制。
3. 跨平台：基于UniApp框架，支持微信小程序、H5、App等多种平台开发。
4. 素材示例丰富：提供大量UI素材和示例，方便参考与二次开发。

安装使用步骤

基础安装

1. 下载项目源码并解压。
2. 将根目录下的/colorui文件夹复制到项目根目录。
3. 在App.vue里引入关键CSS文件，包括main.css、icon.css及项目自身的CSS文件，示例代码如下： ```css

``` 4. 运用ColorUI提供的组件和样式开展开发工作。 5. 按需自定义导航栏和Tabbar。 6. 查阅ColorUI文档和示例，深入了解组件和用法细节。

自定义导航栏

1. 在App.vue中获取系统信息，将相关变量挂载到Vue原型上： javascript 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 } }) },
2. 在pages.json中配置取消系统导航栏： json "globalStyle": { "navigationStyle": "custom" },
3. 在main.js中引入cu-custom组件： javascript import cuCustom from './colorui/components/cu-custom.vue' Vue.component('cu-custom',cuCustom)
4. 在page.vue页面调用： vue <cu-custom bgColor="bg-gradual-blue" :isBack="true"> <block slot="backText">返回</block> <block slot="content">导航栏</block> </cu-custom>

自定义Tabbar

目前ColorUI未提供Tabbar封装，可参考其源码，通过主页面引入多个页面，在主页面切换显示的方式实现，以解决切换闪烁问题。

更新日志

• 2023年xx月xx日：修复一些已知小问题，优化部分组件性能。
• 2021年8月10日：修改node_modules->uni-request->helpers->units中的deepMerge()方法，解决uni-request的请求体数组问题。 javascript export const deepMerge = function () { let result = {}; Array.from(arguments).forEach(e =>{ if( e && typeof e === 'object' && !isEmptyObject(e) ) { Object.keys(e).forEach( key => { if( typeof e[key] === 'object' && !(e[key] instanceof Array) ){ return result[key] = deepMerge( result[key] , e[key] ) } result[key] = e[key] }); } }) return result ; }
• 2019年4月25日 v2.1.6：删除var变量，向下兼容安卓APP；优化单选等表单控件。
• 2019年4月25日 v2.1.5：优化图片上传、点击区域过小问题、图标旋转、demo显示和阴影；修复支付宝小程序编译出错。
• 2019年4月14日 v2.1.4：新增多种阴影；修复一些var属性错误、轮播图控制点隐藏问题、图标类名；修复表单组件里上传图片ios无显示问题。
• 2019年4月01日 v2.1.3：优化代码，支持支付宝小程序；还原textarea样式。
• 2019年3月28日 v2.1.2：修复列表组件样式；优化主样式代码。
• 2019年3月27日 v2.1.1：新增多种扩展；优化堆叠轮播图、消息列表和导航栏封装；修复卡片评论错位。
• 2019年3月25日 v2.1.0：完成元素和组件移植；更改icon文件名，避免图标冲突；针对不同端口优化。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】