ColorUI-UniApp组件库使用笔记

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

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

使用教程

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

1:从github上下载
https://github.com/weilanwl/ColorUI

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

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

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

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

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 界面上用到的是非常的多的哦

或者

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