一行HTML代码+CSS+JS 实现星级评价

优雅的用CSS和JS的方式实现星级评价~

wxml: 只有一行代码，通过点击事件来动态渲染星星

<view class="start">
      <view wx:for="{
   {start}}" wx:key="id" class='{
   {item.styleClass}}' data-index='{
   {index}}' bindtap="bg"></view>
</view>

wxss:

.start {
   
  display: flex;
  width: 80%;
}

重头戏来了：JS

//循环列表，这五颗星一开始是灰色的
start: [{
   
        id: "1",
        styleClass: 'gray',
      },
      {
   
        id: "2",
        styleClass: 'gray',