微信小程序根据返回数字,确定星级好评

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>
上一篇下一篇

猜你喜欢

热点阅读