js如何给每一个头像的背景颜色都不一样

1.效果

2.思路：多种颜色的背景，

定义一个数组，里面放置多种颜色的色值，然后通过循环渲染的数据，取出名字的第一个字，放在头像垂直居中显示，再给这个div动态绑定色值进行背景色的修改；而刚才的颜色数组通过取模将色值取出；

3.取模

4.代码实现

首先在return中定义一个颜色数组；

colorList: [
      "#6D9088",
      "#D6A3CB",
      "#A3D6A7",
      "#E37C7B",
      "#49B8E6",
      "#A48780",
      "#E49D84",
      "#223F59",
      "#8C8C8C",
      "#1E1E1E"
    ]

然后给这个头像的div动态绑定背景色css；
（因为我这里用的wepy，所以动态绑定的方式是这样的；vue的话就是另一种哦~）
数组中是有索引的，我这里用的是数组的索引进行取模，这样就是循环这个colorList中的是个颜色进行渲染了；

<view class="pageImg" style="{{'background'+':'+colorList[index%10]}}">
     {{item.linkMan}}
  </view>

这个linkMan就是我取的第一个字；
通过js取第一个值；

element.linkMan = element.linkMan.substr(0, 1);

这里的css是对这个头像的div的样式；可以参考一下~

.pageImg {
      width: 120rpx;
      height: 120rpx;
      line-height: 120rpx;
      color: #ffffff;
      font-size: 28px;
      margin-left: 6%;
      margin-top: 20rpx;
      /*padding-left: 40rpx;*/
      /*border: 1rpx solid #000000;*/
      border-radius: 50%;
    }

5.点击进入的时候也有一个头像需要展示

这个就是可以通过点击事件将这个模出来的色值传递过去，通过跳转的时候的url上带过去；

wepy.navigateTo({
  url: `./orderInquiry?orderCode=${orderCode}&goodType=${goodType}&backgroundVal=${index}`
          });

然后在另一个页面也是onload接收；

最后就是跟第一个页面一样的动态绑定渲染；