小程序--星星评分系统

1.首先wxml

<view class='comment-stars'>
        <view class='comment-starTile'>评分</view>
        <view class='comment-starBox'>
          <block wx:for="{{starData.two_star}}">
            <view class='comment-starImg'>
              <image src='{{starData.starActiveUrl}}' data-id='{{index+1}}' data-imgitem="starActive" bindtap='starComment'></image>
            </view>
          </block>
          <block wx:for="{{starData.one_star}}">
            <view class='comment-starImg'>
              <image src='{{starData.starUrl}}' data-id='{{index+1}}' data-imgItem="starNormal" bindtap='starComment'></image>
            </view>
          </block>
        </view>
      </view>

2..js

data: {
    starData:{
      starUrl:'../../static/images/icons/star.png',
      starActiveUrl:'../../static/images/icons/star-active.png',
      one_star:5,
      two_star:0
    },
  },
  starComment(e){
    var imgItem = e.currentTarget.dataset.imgitem;
    var starId = e.currentTarget.dataset.id;
    var starData = this.data.starData;
    if(imgItem=="starActive"){
      starData.two_star = Number(starId);
      starData.one_star = 5 - starData.two_star;
      this.setData({
        starData:starData
      })
    }else{
      starData.two_star = Number(starId) + starData.two_star;
      starData.one_star = 5 - starData.two_star;
      this.setData({
        starData:starData
      })
      
    }
  },

3.wxss

.comment-stars .comment-starBox{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20rpx 0 0;
}
.comment-stars .comment-starImg{
  width: 50rpx;
  height: 50rpx;
}