微信小程序像下面图的评分功能是怎么做的?逻辑是什么样的?
逻辑整理:
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
网友评论