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

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.更多代码，关注苏苏的码云