微信小程序实现星级评分效果
原创
微信小程序实现星级评分效果
原创
用户6125058
修改于 2019-09-10 18:00:00
修改于 2019-09-10 18:00:00
代码可运行
运行总次数：0
代码可运行
微信小程序像下面图的评分功能是怎么做的？逻辑是什么样的？
逻辑整理：
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
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
