uni-app实现一个循环卡片效果

王小婷

发布于 2019-12-30 17:24:37

4.4K0

发布于 2019-12-30 17:24:37

文章被收录于专栏：编程微刊编程微刊编程微刊

ColorUI-UniApp是一款适应于H5、微信小程序、安卓、ios、支付宝的高颜值，高度自定义的Css组件库，项目里好多地方都用的到这个UI组件今天记录一个ColorUI-UniApp的使用和实现循环卡片效果。

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

image

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

image

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

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

image

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

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