美文网首页
微信小程序根据返回数字,确定星级好评

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

作者: 追马的时间种草 | 来源:发表于2020-06-08 10:00 被阅读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>
    

    相关文章

      网友评论

          本文标题:微信小程序根据返回数字,确定星级好评

          本文链接:https://www.haomeiwen.com/subject/qyvgzhtx.html