微信小程序实现随机标签云

先上效果图：

要实现的效果：给文本添加随机样式

之前尝试一直失败的原因：
思路一：定义了一个颜色数组，想直接从里面随机取值赋给定义的变量randomColor,结果会报错，说colorArr is not defined
思路二：将获取随机颜色定义成方法，想给文本绑定事件，发现image标签有bindLoad方法，但是文本没有，就不知道怎么调用事件了。

后来发现必须经过第三方变量接收，我才能去使用colorArr这个数组对定义的另一个变量randomColor进行赋值

//1、在data中定义两个数组colorArr: ["#40a851", "#000", "#ca3547", "#2b86e5","#fdab3e", "#fc4359", "#2b86e5","#000", "#40a851"],// 随机颜色数组randomColor:[]//2、在onLoad方法中对randomColor进行赋值var dataLen = this.data.dataArr.length;// 必须经过第三方变量接收才能使用var len = this.data.colorArr.length;var arr = this.data.colorArr;var newArr = [];// 不能只执行一次，要执行多次(dataArr.length次)//要获取跟数据同等个数的随机颜色值while (dataLen>0){// 获取随机颜色var random = arr[Math.floor(Math.random() * len)];newArr.push(random);dataLen--;}// 将随机颜色数组赋值给randomColorthis.setData({ randomColor: newArr });

虽然感觉有点绕，但好在功能是实现了，希望在不断学习的过程中能发现更好的实现方法。

微信小程序实现随机标签云相关推荐

微信小程序模仿快播标签云滚动特效
说到快播,故事肯定就不少.用过的人都知道快播首页有个标签云的特效效果,就是渐隐渐显外加上下滚动,其实还挺好看的.至于其他故事嘛,因为没有酒,所以,还是来说说代码吧~ 一开始不是做这个特效需求,但因为在 ...
微信小程序里面的标签和html标签的对比、微信小程序基础之常用控件
微信小程序和html5标签的区别: HTML5 微信小程序 <h1></h1>...<h6></h6> <p></p> < ...
微信小程序利用腾讯云IM发送语音 + 图片
微信小程序利用腾讯云IM发送语音 + 图片能做到这里说明你已经可以发送普通文本了如果没有的话可以看一下我的上一篇文章有完整的讲解效果图语音聊天发送图片传送 → 发送图片发送语音 ** ...
【微信小程序】随机点名系统（点击开始滚动名字点击结束按钮结束滚动）
[微信小程序]随机点名系统(点击开始滚动名字点击结束按钮结束滚动) 1.效果图: 2.js代码 {Page({data:{condition: Math.floor(Math.random()*7+1 ...
微信小程序一些常用标签与html的对应关系
小程序中的常用标签也是就是我们常用的这些 view(视图容器).rich-text(富文本).swiper(滑块视图容器).icon(图标).text(文字).progress(进度条).button ...
微信小程序图片无法存入云开发数据库，求解决
微信小程序图片无法存入云开发数据库,求解决上传图片的js代码片段上传图片的js代码片段上传图片的js代码片段,觉得自己代码的没错,也能打印出来上传的图片地址,但是发现并没有存进数据库,求大神指点 ...
微信小程序里面的标签和html标签做对比
一.微信小程序和html5标签的区别: 二.wxss 选择器 HTML5 微信小程序 div(标签选择器) view.text.icon.input.image.navigator(标签选择器) cl ...
微信小程序：全新独家云开发微群人脉
今天给大家带来一款云开发版本的微群人脉小程序源码该版本属于采集版本(群二维码自动采集) 该版本属于云开发版本(免服务器和域名) 这是一款不怕封小程序版本 PS:支持用户自主发布那一款还是有点危险因为 ...
微信小程序入门-随机人脸生成
微信小程序入门-随机人脸生成开发背景工具准备微信小程序开发过程开发背景 this person does not exist 这个网站起源于英伟达公司研究人员们打造的AI机器人--其能够生成随 ...
微信小程序上传阿里云OSS，返回204,400,403,405,解决方案
目录微信小程序上传阿里云 ==OSSAccessKeyId,policy,signature==如何获取呢? 配置Bucket跨域访问配置外网域名到小程序的域名白名单上传报错(返回400,403 ...

微信小程序实现随机标签云

微信小程序实现随机标签云相关推荐

最新文章

热门文章