ColorUI-UniApp是一款适应于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";
注意：局部引入
只需要在用到的页面引入即可
image
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 界面上用到的是非常的多的哦
