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

根据后台返回的数字确定要给几颗星,那我们要怎样循环一个数字呢?


两星
满星

后台返个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>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容