先上效果图:
要实现的效果:给文本添加随机样式
之前尝试一直失败的原因:
思路一:定义了一个颜色数组,想直接从里面随机取值赋给定义的变量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 });
虽然感觉有点绕,但好在功能是实现了,希望在不断学习的过程中能发现更好的实现方法。