Applet evaluate stars

 

html

<view class="comment1-description">
    <view>本次评价</view>
    <view class="star-pos" style="display:flex;flex-direction:row;">
      <view class="stars  {{flag>=1? 'on': ''}}" bindtap="changeColor1"></view>
      <view class="stars  {{flag>=2? 'on': ''}}" bindtap="changeColor2"></view>
      <view class="stars  {{flag>=3? 'on': ''}}" bindtap="changeColor3"></view>
      <view class="stars  {{flag>=4? 'on': ''}}" bindtap="changeColor4"></view>
      <view class="stars  {{flag>=5? 'on': ''}}" bindtap="changeColor5"></view>
    </view>
  </view>

wxss control color stars

.stars{
    background:url("http://yunshu.zhangtongdongli.com/uploads/1.png");
    width: 50rpx;
    height: 50rpx;
    background-size: 50rpx 50rpx;
    margin-left: 30rpx;
    transition: 600ms;
}
.on{
    background:url("http://yunshu.zhangtongdongli.com/uploads/2.png");
    width: 50rpx;
    height: 50rpx;
    background-size: 50rpx 50rpx;
    transition: 1s;
    transform: scale(1,1)
}

js (flag data in which default to 0)

 changeColor1: function () {
    var that = this;
    that.setData({
      flag: 1
    });
    console.log(that.data.flag)
  },
  changeColor2: function () {
    var that = this;
    that.setData({
      flag: 2
    });
    console.log(that.data.flag)
  },
  changeColor3: function () {
    var that = this;
    that.setData({
      flag: 3
    });
    console.log(that.data.flag)
  },
  changeColor4: function () {
    var that = this;
    that.setData({
      flag: 4
    });
    console.log(that.data.flag)
  },
  changeColor5: function () {
    var that = this;
    that.setData({
      flag: 5
    });
    console.log(that.data.flag)
  },