方案一：

wxml部分：

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。 <!-- 点亮星星 --> <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',      },     ],
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄