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

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

uni-app实现一个循环卡片效果相关推荐

用户思维模型，围绕用户核心四大模块，拉新、养熟、成交、裂变循环的效果...
用户思维模型,围绕用户核心四大模块,拉新.养熟.成交.裂变循环的效果用户思维模型 1.拉新越勾引人的诱惑设计,借力软文.好友.大V.媒体等推广的方法来获得源源不断高质量的粉丝,给予别人有价值的东西 ...
[今日干货]一个吸粉效果也不错的APP
最近陌陌被封很厉害,今天给大家分享一个吸粉效果也不错的APP--悦跑圈,日吸几百粉没问题~ 1.首先下载APP悦跑圈,用手机号码注册. 2.改写资料和头像,最好用一个女性头像,真实点的,不是网图,增加 ...
android 卡片滑动详情页,在Mugeda中制作顺畅的左右滑动切换卡片效果的教程
之前在做<刁角武汉>的时候对如何选择景点这个问题做了好几个方案,一个是画一张大地图,另一个是做垂直的列表选择,但我还是选择了左右滑动来切换景点.因为在多次尝试之后发现发现在手机屏上似乎不适 ...
Android横向滚动卡片,Android实现横向滑动卡片效果
Android实现横向滑动卡片效果发布时间:2020-09-04 22:51:17 来源:脚本之家阅读:255 作者:itbobby 最近项目上需要实现这样效果的一个页面,本来想找个现成的两下搞定 ...
uni.app H5(微信公众号定位) uni.getLocation
最近在开发公众号,由于之前经常使用uni,app写APP,索性就用uni.app来开发公众号了, 不过也遇到了一个问题,就是在公众号的首页要获取用户的定位.我看了看官网的API 有个uni.getLo ...
html中图片自动循环滚动代码,实现长图片自动循环滚动效果
实现思路滚动效果用实现.有个方法,可以滚动到指定位置(有滚动效果,不是直接到指定位置),不了解的看这里种定位滚动方式演示.每一个Item是一张长图,这样首尾相接滚动起来(滚到无限远)就是无限循环的效 ...
Android Studio App开发之循环试图RecyclerView，布局管理器LayoutManager、动态更新循环视图讲解及实战（附源码）
运行有问题或需要全部源码请点赞关注收藏后评论区留言~~~ 一.循环视图RecyclerView 尽管ListView和GridView分别实现了多行单列和多行多列的列表,使用也很简单,可是它们缺少变化 ...
Android直播app源代码超简单气泡效果
Android直播app源代码超简单气泡效果实现的相关代码 1.1 定义气泡气泡效果我们关心的属性并不多,主要有这几种:半径.坐标.上升速度.水平平移速度.由于我们只在 View 内部使用,因此直接 ...
iOS 类似亲宝宝app下拉刷新动画效果
iOS 类似亲宝宝app下拉刷新动画效果,最近看了下这种效果,感觉有点意思.于是就实现了一下. 方案一采用两个背景View1.View2,三个球ball1,ball2,ball3,将ball1,ba ...

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

uni-app实现一个循环卡片效果相关推荐

最新文章

热门文章