微信小程序根据返回数字,确定星级好评
2020-06-08 本文已影响0人
追马的时间种草
根据后台返回的数字确定要给几颗星,那我们要怎样循环一个数字呢?
两星 满星
后台返个2那我们就显示两个红星,3个红色空心。返回5就全都是红星
星星最多只能是5个
比较简单,直接上代码吧!
<view class="stars">
<!-- 有颜色 -->
<block wx:if='{{item.MeanValue>0}}'>//判断返回的数据大于0再循环
<block wx:for='{{item.MeanValue-0}}' wx:key='un'>
<image class="star" src="/images/star_yellow.png"></image>//这是红色实心的星星
</block>
</block>
<!-- 无颜色 -->
<block wx:if='item.MeanValue<5'>//判断如果传过来的值小于5就执行以下循环
<block wx:for='{{5-item.MeanValue-0}}' wx:key='un'>//这是红色空心的数量
<image class="star" src="/images/star_gray.png"></image>
</block>
</block>
</view>
另一种方法就是直接把星星弄成文字,给文字加样式
<view class="wjxs">
<view class="{{item.MeanValue>=5?'act':''}}">☆</view>
<view class="{{item.MeanValue>=4?'act':''}}">☆</view>
<view class="{{item.MeanValue>=3?'act':''}}">☆</view>
<view class="{{item.MeanValue>=2?'act':''}}">☆</view>
<view class="{{item.MeanValue>=1?'act':''}}">☆</view>
</view>