react组件大众点评星星评分解决方案-精确到小数级

置顶 wangxinyue_blog

于 2020-10-16 11:52:31 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：自创组件文章标签： css reactjs javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/wangxinyue_blog/article/details/109112266

自创组件专栏收录该内容

0 篇文章

订阅专栏

本文分享如何通过CSS渐变和创新设计，打破传统半星评分限制，实现精确到小数点的星星评分组件，包括逻辑概述、代码实现细节和总结经验教训。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

现在的大多数评分组件是精确到半颗星星的，例如：antd的评分组件
在这里插入图片描述
但是如果遇到精确细节的产品，他会要求成这样精确到小数位

大众点评也是这样的

想要做到细致到小数的效果要怎么做呢？我找了大量素材没有找到合适的解决方案，于是决定自己搞下

零·素材准备

一个星星的镂空png图像 (因为是透明的，需要的小伙伴查看源代码可见图片)
两个设计给你的颜色对比值
了解下Css渐变的

壹·逻辑概述

在这里插入图片描述

贰·星星评分组件

在这里插入图片描述

2.1外部计算组件

根据传入参数计算出满星，小数点星星以及灰色星星的个数
调用星星渲染函数

满星则100填充高亮
小数点星星传入处理后的渐变百分比
灰色星星则无数据传入

在这里插入图片描述

2.2 星星填充组件

根据出入的数字判断是否使用渐变色
div checked-star-box 为相对定位，内部元素绝对定位在统一位置
利用png的透明属性+z-index设置，底部叠加填充渐变色

在这里插入图片描述

2.3 使用样式

以下是组件内使用的样式
在这里插入图片描述

总结

我刚开始的时候也没有思路，设计也说要不先按半个星星的方案，因为网上大都是半颗星星，我查询了大多的评分方案，或是上层填色位置移动或是jquery实现的半颗星星，，我想着先试试，不行就用半颗星星，经过调研，我观察到进度条是符合小数点的，感觉完全可以按照进度条去做，最后盖个罩子，不给他显示成长方形就行了，根据这个思路，果然实现了小数级别的星星评分，从此经历得出了以下的总结：

不要因为设计把自己困在已有的思维里，要打破思维的墙，从不同角度看问题
要勇于尝试，你开始去做了，就成功了80%

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。