微信小程式實現星星評分效果

思路很簡單，小星星都是一張張獨立的圖片，點選的時候改變圖片的路徑就可以了。
我是用背景圖片做的，先給盒子設定背景圖片為灰色的小星星，盒子是根據js檔案中的stars陣列迴圈出來的，根據flag的值確定是灰色的小星星還是黃色的小星星，點選的時候獲取當下這個盒子的index值，然後去更改stars陣列中索引值小於等於index的每一項的flag就可以了。
當然，也可以用類名來控制灰色和黃色的小星星，在點選的時候操作類名也是可以實現的。
 

<view class="container">
  <view class='stars'>
    <image src=''></image>
    <view class='content'>
      <view>評分</view>
      <view>
        <view wx:for="{{stars}}" wx:key="" style='background:url("{{item.flag==1?item.bgImg:item.bgfImg}}") no-repeat top; background-size:100%;' data-index="{{index}}" bindtap='score'></view>
      </view>
    </view>
  </view>
  <view class='reviews'>
    <textarea placeholder='請寫下購買體會或商品的相關資訊，可以拉其他小夥伴提供參考~（評價在100字以內）'></textarea>
  </view>
</view>

.stars{
  padding:85rpx 0 60rpx 273rpx;
  box-sizing: border-box;
  position: relative;
  border-bottom: 1rpx solid #ececec;
  background-color: #fff;
}
.stars image{
  width: 190rpx;
  height: 190rpx;
  border: 1rpx solid #000;
  position: absolute;
  top: 41rpx;
  left: 36rpx;
}
.stars .content view{
  font-size: 32rpx;
  color: #4a4a4a;
}
.stars .content>view:last-of-type{
  height: 40rpx;
  margin-top: 48rpx;
}
.stars .content>view:last-of-type view{
  float: left;
  width: 42rpx;
  height: 42rpx;
  margin-right: 25rpx;
  background-size: 100% 100%;
}

data: {
    stars:[
      {
        flag:1,
        bgImg: "http://wximg.youtasc.com/star.png",
        bgfImg:"http://wximg.youtasc.com/f_star.png"
      },
      {
        flag: 1,
        bgImg: "http://wximg.youtasc.com/star.png",
        bgfImg: "http://wximg.youtasc.com/f_star.png"
      },
      {
        flag: 1,
        bgImg: "http://wximg.youtasc.com/star.png",
        bgfImg: "http://wximg.youtasc.com/f_star.png"
      },
      {
        flag: 1,
        bgImg: "http://wximg.youtasc.com/star.png",
        bgfImg: "http://wximg.youtasc.com/f_star.png"
      },
      {
        flag: 1,
        bgImg: "http://wximg.youtasc.com/star.png",
        bgfImg: "http://wximg.youtasc.com/f_star.png"
      }
    ]
  },
  score:function(e){
    var that=this;
    for(var i=0;i<that.data.stars.length;i++){
      var allItem = 'stars['+i+'].flag';
      that.setData({
        [allItem]: 1
      })
    }
    var index=e.currentTarget.dataset.index;
    for(var i=0;i<=index;i++){
      var item = 'stars['+i+'].flag';
      that.setData({
        [item]:2
      })
    }
  }

轉載地址：https://blog.csdn.net/weixin_41257563/article/details/82756738