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

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

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

5640239-a0f7a65af8e532dc.png
image

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

5640239-006a667791800aa9.png
image

3:打开App.vue文件,引入全局colorui样式

@import "colorui/main.css";
@import "colorui/icon.css";
5640239-869d6ea2ca1a2e68.png
image

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

5640239-47c237424a099a9b.png
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 界面上用到的是非常的多的哦

5640239-54587df7c0b9e555.png
  • 1
    点赞
  • 1
    评论
  • 5
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<p> <strong><span style="font-size:16px;">【课程简介】</span></strong> </p> <p> <span style="font-size:16px;">课程目标:</span><span style="font-size:16px;">提高vue实战技术和学习uniapp开发</span><span style="font-size:16px;"></span><br /> <span style="font-size:16px;">课程特色:</span><span style="font-size:16px;">该门课程属于中高级进阶课程,课程开发一个仿阿里飞猪旅游app的微信小程序,该课程使用uni-app框架结合小程序云开发,开发语言使用vue,使用uniapp可以做更强大的小程序,该课程专为想要学习开发小程序或者提高vue技术的同学,课程旨在提高你的前端技术和拿到心仪的offer,学会该门课程相信你能做更强大的产品上线,学习该门课程需要具备vue基础知识,如果没有学习过vue基础知识的同学,可到我主页学习基础教程:</span><span style="font-size:16px;color:#337FE5;">【</span><span style="font-size:16px;color:#337FE5;">VUE开发旅游攻略移动端,零基础到实战,短信验证码,登录,注册</span><span style="font-size:16px;color:#337FE5;"></span><span style="font-size:16px;color:#337FE5;">】</span> </p> <p> <br /> </p> <p> <strong><span style="font-size:16px;">【课程收益】</span></strong> </p> <p> <span style="font-size:16px;">1.学员学完课程可当做面试作品,毕业设计</span> </p> <p> <span style="font-size:16px;">2.该课程专为想要学习开发小程序或者提高vue技术的同学,课程旨在提高你的前端技术和拿到心仪的offer,学会该门课程相信你能做更强大的产品上线</span> </p> <p> <span style="font-size:16px;">3.学习小程序云开发</span> </p>
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值