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

先上效果图:
这里写图片描述

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

之前尝试一直失败的原因:
思路一:定义了一个颜色数组,想直接从里面随机取值赋给定义的变量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--;
    }
    // 将随机颜色数组赋值给randomColor
    this.setData({ randomColor: newArr });

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

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值