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

时间:2022-11-19 14:51:30

先上效果图:
微信小程序实现随机标签云

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

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

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