微信小程序实现点击星星的方式进行评分

需要将star.png和shineStar.png两张图片放到images文件夹里面

最终实现效果（点击星星进行评分）如下：

image.png

wxml文件

  <view style="height:200rpx"></view>
  <view class="row">
  <view style="width:25%;font-size:30rpx;padding-left:80rpx;">评分</view>
  <view class="content" style="flex-direction:row;display:flex;align-items:center;width:75%;">
  <image bindtap="tapstar0" data-text="0" wx:if="{{starPic[0]==0}}" class="star" src="../../images/star.png" mode="widthFix"/>
  <image bindtap="tapstar0" data-text="0" wx:elif="{{starPic[0]==1}}" class="star" src="../../images/shineStar.png" mode="widthFix"/>
  <image bindtap="tapstar0" data-text="1" wx:if="{{starPic[1]==0}}" class="star" src="../../images/star.png" mode="widthFix"/>
  <image bindtap="tapstar0" data-text="1" wx:elif="{{starPic[1]==1}}" class="star" src="../../images/shineStar.png" mode="widthFix"/>
  <image bindtap="tapstar0" data-text="2" wx:if="{{starPic[2]==0}}" class="star" src="../../images/star.png" mode="widthFix"/>
  <image bindtap="tapstar0" data-text="2" wx:elif="{{starPic[2]==1}}" class="star" src="../../images/shineStar.png" mode="widthFix"/>
  <image bindtap="tapstar0" data-text="3" wx:if="{{starPic[3]==0}}" class="star" src="../../images/star.png" mode="widthFix"/>
  <image bindtap="tapstar0" data-text="3" wx:elif="{{starPic[3]==1}}" class="star" src="../../images/shineStar.png" mode="widthFix"/>
  <image bindtap="tapstar0" data-text="4" wx:if="{{starPic[4]==0}}" class="star" src="../../images/star.png" mode="widthFix"/>
  <image bindtap="tapstar0" data-text="4" wx:elif="{{starPic[4]==1}}" class="star" src="../../images/shineStar.png" mode="widthFix"/>
  <view style="margin-left:20rpx;font-size:28rpx;">{{score}}分</view>
  </view>
  </view>

js文件

    Page({
  data: {
    starPic: [0, 0, 0, 0, 0],  //标记每个星星的图片显示灰色还是黄色，0表示灰色，1表示黄色
    score:0
  },
  tapstar0: function (e) {
    var i = new Number(e.target.dataset.text)//获取image里面data-text传递过来的值，并转换成number类型，用来识别是哪颗星星被点击
    var tempindex = [0, 0, 0, 0, 0]
    for (var m = 0; m <= i; m++) {
      tempindex[m] = 1
    }
    var score = (i + 1) * 20
    this.setData({ starPic: tempindex, score: score })
  },
})

wxss文件

.star{
  width:12%;
  padding-left:15rpx;
}
.row{
  width:90%;
  flex-direction: row;
  display: flex;
  align-items: center;
  margin-top:5rpx;
  margin-bottom:20rpx;
}