小程序实现星星评分(共10分),含有半星

最新推荐文章于 2022-10-26 08:51:57 发布

周家大小姐.

最新推荐文章于 2022-10-26 08:51:57 发布

阅读量3.1k

点赞数 2

分类专栏： WX

本文链接：https://blog.csdn.net/qq_40190624/article/details/89714756

版权

本文介绍如何在小程序中创建一个星星评分组件，该组件可以根据父组件传递的分数显示相应数量的灰色、半星和亮星。提供了完整的代码链接以及实际效果展示。

摘要由CSDN通过智能技术生成

完整代码地址:https://download.csdn.net/download/qq_40190624/11154051

效果图:

星星评分做为一个子组件,由父组件传入分值进行判断,具体显示几个灰星,几颗半星及亮星

子组件:stars.html

<view class='movie-grade'>
  <image style="width:{
  {starSize}}rpx;height:{
  {starSize}}rpx;" src='/images/rate_light.png' wx:for="{
  {lights}}" wx:key="item"></image>
  <image style="width:{
  {starSize}}rpx;height:{
  {starSize}}rpx;"  src='/images/rate_half.png' wx:for="{
  {halfs}}" wx:key="item"></image>
  <image  style="width:{
  {starSize}}rpx;height:{
  {starSize}}rpx;"