1.實現(xiàn)效果

在這里插入圖片描述

2.實現(xiàn)思路

從顏色列表中隨機取一個顏色，賦值給數(shù)組的每一項

Math.floor(Math.random() * colorArr.length)

3.實現(xiàn)代碼

<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.更多代碼，關注蘇蘇的碼云