小程序点亮星星评价

先看效果图

wxml如下：

<view class='itembox'>
  <view wx:for="{{imgs}}" wx:key="{{item.id}}" bindtap='select' data-index="{{item.id}}">
    <image class="star" src="{{item.id>starId?src2:src1}}"></image>
  </view>
  <view class='scorePin'>{{starId}}.00</view>
</view>

wxss如下：

.itembox {
  display: flex;
  align-items: center;
}
.scorePin{
  font-size:26rpx;
  font-weight: 600;
}
 
.star {
  width: 50rpx;
  height: 50rpx;
  margin: 0 5rpx;
  vertical-align: middle;
}

js如下：

 data: {
    imgs: [{
      id: 1
    }, {
      id: 2
    }, {
      id: 3
    }, {
      id: 4
    }, {
      id: 5
    }],
    starId: 5,
    src1:'../../../images/xing1.webp',
    src2:  '../../../images/xing2.jpg'
  },
select(e) {
    console.log(e)
    this.data.starId = e.currentTarget.dataset.index;
    this.setData({
      starId: this.data.starId
    })
  }

这样就实现了 点亮星星评论的