方案一：

wxml部分：

<!-- 點亮星星 -->

<view class='stars'>

   <view class='contents'>

      <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='scores'> </view>

   </view>

</view>

 

wxss部分：

.stars{

  width:100%;

  display: flex;

  height: 40rpx;

  box-sizing: border-box;

  position: relative;

}

.contents{

  width:100%;

  display: flex;

  box-sizing: border-box;

  position: relative;

}

.contents:last-of-type{

  height: 40rpx;

}

.contents:last-of-type view{

  width: 42rpx;

  height: 42rpx;

  margin-right: 15rpx;

  background-size: 100% 100%;

}

JS部分：

// 點亮星星的基礎數據

    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"

      }

    ],

// 點亮星星的事件部分

  scores: 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

      })

    }

  }

 

方案二：（缺陷：目前我還沒想到如何實現動態的效果）

wxml部分：

<!-- 點亮星星 -->

    <view class='shop-star'>

      <view class='star-after'>★★★★★</view>

      <view class='star-before' >★★★★★</view>

    </view>

wxss部分：

.shop-star{

  font-size: 50rpx;

  display: flex;

  position: absolute;

}

.star-after{

  font-size: 50rpx;

  color: #e2e2e2;

}

.star-before{

  position: absolute;

  color: #f19e38;

  width: 90%;

  overflow: hidden;

}

 

方案三：

wxml部分：

<block wx:for="{{sumelist}}" wx:key="">

    <image class='comment-icon' src='{{item.url}}' />

 </block>

 <!-- 評論星級、空心 -->

 <block wx:for="{{sumeList}}" wx:key="">

    <image class='comment-icon' src='{{item.Url}}' />

 </block>

wxss部分:

.comment-icon{

  width: 30rpx;

  height: 30rpx;

  display: inline-block;

}

js部分：

sumelist:[

      {

      id:0,

      url:'img/star.png',

    },

      {

        id:1,

        url: 'img/star.png',

      },

      {

        id: 2,

        url: 'img/star.png',

      },

       {

        id: 3,

        url: 'img/star.png',

      },

       {

        id:4,

        url: 'img/star.png',

      },

    ],

   sumeList:[

     {

      id:0,

       Url:'img/starg.png',

    },

     {

       id:1,

       Url: 'img/starg.png',

     },

     {

       id: 2,

       Url: 'img/starg.png',

     },

     {

       id: 3,

       Url: 'img/starg.png',

     },

     {

       id:4,

       Url: 'img/starg.png',

     },

    ],