微信小程序实现星级评分效果

微信小程序像下面图的评分功能是怎么做的？逻辑是什么样的？

逻辑整理：

1、不管如何都是显示5颗星星，那就让星星（图片）循环5次

2、图片分为3张（全黄色星星、半黄半灰星星、全灰色星星）

3、根据目标分值判断什么情况下显示什么星星

（比如分值是：35）

4、判断显示什么星星

全黄色星星：35/10 >= index=1

半黄半灰：35/10>=index && 35%10 !=0

全灰色星星：直接else就好了

代码实现：

<view

    class='stars'

    wx:for='{{[1,2,3,4,5]}}'

    wx:key="{{index}}"

    wx:for-item='i'

>

    <image

      src='/img/star_fill_whole.png'

      wx:if="{{item.rating.stars/10 >= index+1 }}"

    ></image>

    <image

      src='/img/star_fill_half.png'

      wx:elif="{{item.rating.stars/10 >= index && item.rating.stars%10 !=0 }}"

    ></image>

    <image

      src='/img/star_fill_none.png'

      wx:else

    ></image>

</view>

微信小程序视频课程：https://www.3mooc.com/front/couinfo/205