微信小程序 制作五星评分组件

这是自己做的一个五星评分组件,直接放项目里用，没有抽取为一个单独的组件，因为本身就很小，下面是一个纯显示的五星评级，如果需要打分，可以在image上加上点击事件，动态改变值。

index.wxml

<block wx:for="{{imgs}}" wx:key="{{item.id}}">
   <image class="star" src="{{item.id>starId?src:src1}}"></image>
</block>

index.wxss

.star{
          width: 25px;
          height: 25px;
          margin: 0 5rpx;
          vertical-align: middle;
        }

index.js

data:{
    imgs:[{id:1},{id:2},{id:3},{id:4},{id:5}],
    src:'../../imgs/star.png',
    src1:'../../imgs/star_yellow.png'
},
onLoad:function () {
    this.setData({starId:3})
}