ColorUI-UniApp组件库使用笔记

心已赠人 2023-02-13 11:18 11阅读 0赞

uniapp里面的一个UI组件库  
https://ext.dcloud.net.cn/plugin?id=239

这是一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值，高度自定义的Css组件库

![format_png][]

使用教程

项目里好多地方都用的到这个UI组件 今天记录一个ColorUI-UniApp的使用和实现循环卡片效果。

1:从github上下载  
[https://github.com/weilanwl/ColorUI][https_github.com_weilanwl_ColorUI]

![image][]

2：将ColorUI-UniApp里面的文件夹colorui导入自己的项目

![image][image 1]

3：打开App.vue文件，引入全局colorui样式

@import "colorui/main.css";
    @import "colorui/icon.css";

![image][image 2]

注意：局部引入  
只需要在用到的页面引入即可

![image][image 3]

4:实现一个循环卡片效果

<template>
    	<view>
    		<view class="cu-card dynamic" v-for="(item,index) in productList" :key="index">
    			<view class="cu-item shadow">
    				<view class="cu-list menu-avatar">
    					<view class="cu-item">
    						<view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg);"></view>
    						<view class="content flex-sub">
    							<view>{
       {item.name}}</view>
    							<view class="text-gray text-sm flex justify-between">
    								{
       {item.date}}
    							</view>
    						</view>
    					</view>
    				</view>
    				<view class="text-content">
    					开始时间： {
       {item.beginTime}}
    				</view>
    				<view class="text-content">
    					结束时间： {
       {item.endTime}}
    				</view>
    				<view class="text-content">
    					加班时长：{
       {item.total}}
    				</view>
    				<view class="text-gray text-sm text-right padding">
    					<text class="cuIcon-attentionfill margin-lr-xs"></text> {
       {item.stats}}
    				</view>
    			</view>
    		</view>
    	</view>
    </template>
    <script>
    	export default {
    		data() {
    			return {
    				isCard: false,
    				productList: [{
    						image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product1.jpg',
    						name: '李俊飞',
    						date: '2019-12-31',
    						beginTime: '2019-12-31   9:30',
    						endTime: '2019-12-31   9:30',
    						total: '3小时',
    						stats: '已同意'
    					},
    					{
    						image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product2.jpg',
    						name: '罗西西',
    						date: '2019-12-31',
    						beginTime: '2019-12-09   9:00',
    						endTime: '2019-12-10   15:35',
    						total: '5小时',
    						stats: '已同意'
    					},
    					{
    						image: 'https://img-cdn-qiniu.dcloud.net.cn/uploads/example/product3.jpg',
    						name: '小金龙',
    						date: '2019-12-31',
    						beginTime: '2019-12-11   9:30',
    						endTime: '2019-12-31   17:22',
    						total: '6小时',
    						stats: '已拒绝'
    					}
    				],
    			};
    		},
    		methods: {}
    	}
    </script>
    <style>
    	.cu-card.dynamic>.cu-item>.text-content {
    		margin-bottom: 1px;
    		margin-top: 6px;
    	}
    </style>

ok，大致的效果就是这样的啦，在UI 界面上用到的是非常的多的哦

![format_png 1][]

#### 或者 ####

可以导入到专用的编辑器，查看UI库的全部效果  
预览：https://ext.dcloud.net.cn/plugin?id=239  
![format_png 2][]

![format_png 3][]

![format_png 4][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWNmN2E4MDIyZDViNWJkN2IucG5n?x-oss-process=image/format,png
[https_github.com_weilanwl_ColorUI]: https://github.com/weilanwl/ColorUI
[image]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWEwZjdhNjVhZjhlNTMyZGMucG5n?x-oss-process=image/format,png
[image 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTAwNmE2Njc3OTE4MDBhYTkucG5n?x-oss-process=image/format,png
[image 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTg2OWQ2ZWEyY2ExYTJlNjgucG5n?x-oss-process=image/format,png
[image 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTQ3YzIzNzQyNGEwOTlhOWIucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTU0NTg3ZGY3YzBiOWU1NTUucG5n?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWMwYWM3OWEwYWZlMGEzN2QucG5n?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTUwNzVmM2UzOTkwZTZjNTAucG5n?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LWNlNGI4YmZiZDIwNGE0NDkucG5n?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20200528171041375.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size_16,color_FFFFFF,t_70#pic_center