微信小程序实现文字随机颜色

1.实现效果

2.实现思路

从颜色列表中随机取一个颜色，赋值给数组的每一项

Math.floor(Math.random() * colorArr.length)

3.实现代码

<view class="box flex-row  "><block wx:for="{{arr}}" wx:key="key" wx:for-index="key"><view class='box_item' style="background-color:{{item.color}}">{{item.name}}</view></block>
</view>

page {background-color: #f5f5ff;
}.box {width: 710rpx;background-color: #fff;box-sizing: border-box;padding: 40rpx 20rpx;margin: 20rpx auto;border-radius: 10rpx;flex-wrap: wrap;
}.box_item {padding: 4rpx 10rpx;margin: 20rpx;border-radius: 4rpx;float: left;color: #fff;font-size: 28rpx;flex-shrink: 0;
}

Page({data: {arr: [{name: '苏苏1.0',},{name: '苏苏2.0',},{name: '苏苏3.0',},{name: '苏苏4.0',},{name: '苏苏5.0',}, {name: '苏苏就是小苏苏',}, {name: '加油',},{name: '努力',},{name: '认真',},{name: '卷起来',},],// 颜色列表colorArr: ["#7FFFAA", "#ff7070", "#EEC900", "#4876FF", "#ff6100", "#FFA500","#7DC67D", "#E17572", "#7898AA", "#C35CFF", "#33BCBA", "#C28F5C","#FF8533", "#6E6E6E", "#428BCA", "#5cb85c", "#FF674F", "#E9967A","#66CDAA", "#00CED1", "#9F79EE", "#CD3333", "#FFC125", "#32CD32","#00BFFF", "#68A2D5", "#FF69B4", "#DB7093", "#CD3278", "#607B8B"],},onLoad: function (options) {this.getData()},getData() {var { colorArr, arr } = this.data;arr.forEach(item => {item.color = colorArr[Math.floor(Math.random() * colorArr.length)]})this.setData({arr,})}})

4.更多代码，关注苏苏的码云

微信小程序实现文字随机颜色相关推荐

c语言小程序跑马灯,微信小程序实现文字跑马灯效果
本文实例为大家分享了微信小程序实现文字跑马灯的具体代码,供大家参考,具体内容如下 wxml 1 显示完后再显示 Box"> 2 出现白边后即显示 Box"> {{tex ...
微信小程序图片文字水平垂直居中对齐
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到网站微信小程序图片文字水平垂直居中对齐要实现水平垂直居中可使用如下方案给父元素设置 .td {dis ...
小程序如何做成html的滚动字幕,微信小程序实现文字滚动
本文实例为大家分享了微信小程序实现文字滚动的具体代码,供大家参考,具体内容如下 wxml: 显示完后再显示: {{text}} 出现白边后即显示: {{text}} {{text}} wxss: .e ...
微信小程序实现文字滚动
微信小程序实现文字滚动 1.wxml <view class="container"><view class='list' animation="{{a ...
在微信小程序中使用“随机键盘”
最近研究微信小程序,发现在手机上使用系统键盘非常不方便,一是按键太小,对于小学生来说,操作非常不方便:二是系统键盘反复切换影响界面布局.于是自己决定自己写一个随机的小键盘. 原理非常简单:拿" ...
微信小程序设置文字样式white-space失效
微信小程序中的换行今天遇到了一个多段文字展示的效果,试了很多种方法设置样式等都实现不了,最后发现,在微信小程序中,不能使用view为文字做换行等操作 HTML中的换行可以直接使用标签,但是微信小程 ...
微信小程序的导航栏颜色
微信小程序做好后看到上面的导航不好看想设置一下,就是这个位置三个点,一个圈设置当然先进入你的全局app.json中进行修改找到你的app.json,其中含有pages下面都是你的页面你设置信息看 ...
微信小程序实现文字转语音
很多现有的语音转化都只支持web端和app,如百度和谷歌等: SpeechSynthesisUtterance:https://blog.csdn.net/Qcg0223/articl ...
微信小程序图片文字敏感内容验证获取小程序accessToken
直接上代码:代码中有解释. 一下是验证文字的静态方法直接调用就行. //文字安全检测 (accessToken是微信小程序的APPID和scret获取的)public static Boolean m ...

微信小程序实现文字随机颜色

1.实现效果

2.实现思路

3.实现代码

4.更多代码，关注苏苏的码云

微信小程序实现文字随机颜色相关推荐

最新文章

热门文章