微信小程序商品星级评价

版本一点击时有‘快闪’的问题，感觉不是很美，请直接看改良后的版本二

版本一
WXML

 <view class="stars">
          <image wx:for="{{stars}}" wx:for-item="item" src="../../images/{{item.src}}" data-index="{{item.index}}" bindtap='clickstar'></image>
        </view>

JS

//给stars赋初始值
  stars:function(){
    var stars = [];
    for (var i = 0; i < 5; i++) {
      stars.push({ index: String(i), src: "shangxiangdi03@2x.png" });//在页面上渲染出五颗灰色的小星星
    }
    this.setData({
      stars: stars,
    })
  },
//星标
  clickstar:function(e){
    this.stars();//每次点击，就重置一次小星星，即，恢复灰色的小星星后再渲染颜色
    var that=this;
    var arr = [];
    var etargetindex = Number(e.target.dataset.index)+1;
    for (var i = 0; i < etargetindex;i++){//创建一个新数组，点击第几颗星星，就往数组里放几颗彩色星星
      arr.push({ index:String(i), src: "shangxiangdi04@2x.png" });
      }
    var newarr = arr.concat(that.data.stars.slice(etargetindex))//把剩余的灰色星星拼接到彩色星星后，替换原有的存储星星的数组
     this.setData({
       stars: newarr,
       score: etargetindex
     })
  },

版本二
WXML

<view class="stars">
  <text wx:for="{{stars}}" wx:for-item="item" wx:for-key="" data-index="{{item.index}}" bindtap='clickstar' class="star" style="background:url({{imgUrl}}{{item.src?item.src:'shangxiangdi03@2x.png'}}) no-repeat 0 0;background-size:100% 100%"></text>
  </view>

JS

//给stars赋初始值
  stars: function () {
    var stars = [];
    for (var i = 0; i < 5; i++) {
      stars.push({ index: String(i), src: "" });
    }
    this.setData({
      stars: stars,
    })
  },
  //点击星标
  clickstar: function (e) {
    var that = this;
    var stars=that.data.stars;
    var etargetindex = Number(e.target.dataset.index) + 1;
    for (var i = 0; i < etargetindex; i++) {
      stars[i].src = "shangxiangdi04@2x.png";
    }
    for (var z = stars.length; z > etargetindex; z--) {
      stars[z-1].src = "";
    }
    this.setData({
      stars: stars,
    })
  },