微信小程序展示星星

Question

这种星星展示怎么做

后端会返给我 星星的值 num类型的 star:4 我前端如何展示呢?

希望有老哥指点一下

Answer 1

首先确定满分值，分两种情况，
1、没有半星，直接在image标签上for循环num展示

<image  wx:for="{{num}}" wx:key="item" src="{{ico_star}}" ></image>
<image  wx:for="{{total - num}}" wx:key="item" src="{{ico_star_gray}}" ></image>

2、有半星，根据num值判断最后一个星是否显示另一张半星的图

Answer 2

引个小程序UI库就可以了
vant