【前端】ionic4 card卡片显示随机颜色

前言

小编在前端项目中，需要将不同的作答记录信息卡片，显示不同的颜色，这个效果用到了随机器的生成和typeScript中的集合，以及html中的[ngStyle]属性。

卡片随机颜色实现记

一、效果图

二、 ts代码

1.定义卡片颜色集合：cardColor

// 定义卡片颜色集合    public cardColor: any =["hsl(42, 48%, 54%)","hsl(138, 24%, 48%)","rgb(200, 138, 131)","rgb(178, 199, 168)","rgb(16, 195, 195)","hsl(0, 21%, 68%)","rgb(226, 166, 198)","hsl(278, 17%, 66%)","rgb(153, 199, 235)","blueviolet"];

2.获取后端数据lists并进行遍历处理，对每条数据中的remark字段添加颜色值

   /*** 处理所有作答记录的配色* @author 冯浩月* @since 2019年3月27日09:27:17*/handleList(lists: any) {lists.forEach(element => {element.remark = this.cardColor[Math.floor(Math.random() * 6)];  // 卡片的颜色随机生成                                  });}

三、html代码

前端使用[ngStyle]渲染颜色

 <!-- 显示数据 --><div style="float:left;width:50%;" *ngFor="let list of lists; let j = index"><!-- card框的颜色 --><ion-card class="welcome-card" [ngStyle]="{'background-color':list.remark}">            <ion-row><span style="font-size: 13px;margin: 7%;">{{list.userName}}</span></ion-row><ion-row style="margin-top: 4%;margin-left: 4%;font-size: 18px;"><div style="font-size:18px;">{{list.content}}</div></ion-row><ion-card><div>

小结

小编在实现这个功能效果的过程中，基本没有什么问题，因为ionic的编程规则与angular的语法有很多相似之处，使用[ngStyle]这个属性是关键，同时懂得借鉴集合数据中的字段值又是第二个关键之处。

感谢您的访问！

【前端】ionic4 card卡片显示随机颜色相关推荐

JavaScript分类显示随机颜色【红绿蓝青黄紫、黑白、全彩】
JavaScript分类显示随机颜色[红绿蓝青黄紫.黑白.全彩],随机显示分类颜色,按color系列显示随机颜色. web中颜色的表达方法可以用内定的英文单词或颜色代码,其中颜色代码一般分两种形 ...
css实现随机颜色,CSS3 一个显示随机颜色的动画
CSS 语言: CSSSCSS 确定 html, body { background: -webkit-linear-gradient(top, #fff, #dcf); background: li ...
Vue卡列表中不同卡片显示不同背景颜色
Vue卡列表中不同卡片显示不同背景颜色最近做一个项目的移动端页面,需要完成一个卡列表,不同银行显示不同颜色的问题,一开始考虑过通过识别银行图标色调生成,但最后为了考虑开发成本,只做几种通用的色调. ...
随机背景在随机位置添加随机颜色的文字
功能:根据给的中文字符串,取随机的图片为背景,将字符串中的每个字都随机显示在图片上,并偏斜一定的角度. 后端图片处理类,会返回图片对应的宽.高.旋转角度.旋转前起始x.y及文字四个角的x.y坐标: c ...
前端之文本、长度、颜色、字体、背景-36
前端之文本.长度.颜色.字体.背景-36 目录一.css三种引用方式 1.行间式 2.内联式 3.外联式 4.三种方式的优先级二.样式与长度颜色 1.基本样式 2.长度 3.颜色三.常用样式 1 ...
echarts中markline设置后，前端其他数据都显示了，就是不显示markline，请求赐教
Echarts菜鸟,刚刚开始学习,请问echarts中markline设置后,前端其他数据都显示了,就是不显示markline,就是不显示警戒线!!!!请求大神赐教 option5 = { toolt ...
3种前端动态设置纯色图标的颜色的方法
在开发中,我们需要实现动态切换全局主题色,对于文字颜色或者背景都很好实现,但是页面中经常会有很多小图标,也需要根据主题色进行切换. 这篇文章主要介绍3种最常用的实现方法. 1.使用svg图,通过更改p ...
matlab显示字体颜色,在Matlab中显示字体颜色
我正在尝试创建一个数字(转换为字符串)的数组,并在阈值下降的下方,对于我当前使用0.5的测试.我需要我的桌子上的每个值的字体都落在我的门槛上,以红色显示,在我目前的代码中,我只使用2列,但我将使用10 ...
Web前端，CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
前言持续总结输出中,今天分享的是Web前端,CSS中关于背景颜色.背景图片.背景平铺.背景位置.背景相关属性连写 1.背景颜色 background-color(bgc) 颜色取值: 关键字.rgb ...

【前端】ionic4 card卡片显示随机颜色

前言

卡片随机颜色实现记

小结

【前端】ionic4 card卡片显示随机颜色相关推荐

最新文章

热门文章