首先准备三种不同的星星图片,满星、半星、空星的;
示例代码:
比如评分是小数点 4.8分,就根据相应的判断显示内容,乘以10好取余;接口返回的字段名称替换4.8就欧了;
<block wx:for="{{5}}" wx:for-index="index2" wx:key="index2" ><!-- 满星 --><icon wx:if="{{4.8 >= index2+1}}" class="icon" style="background: url(../../images/icon/start.png) no-repeat;background-size: 22rpx 22rpx;"></icon><!-- 半星 --><icon wx:elif="{{4.8 >= index2 && (4.8*10)%10 != 0}}" class="icon" style="background: url(../../images/icon/xingji.png) no-repeat;background-size: 22rpx 22rpx;"></icon><!-- 空星 --><icon wx:else class="icon" style="background: url(../../images/icon/start1.png) no-repeat;background-size: 22rpx 22rpx;"></icon></block>