react组件大众点评星星评分解决方案-精确到小数级
背景
现在的大多数评分组件是精确到半颗星星的，例如：antd的评分组件
但是如果遇到精确细节的产品，他会要求成这样精确到小数位
大众点评也是这样的
想要做到细致到小数的效果要怎么做呢？我找了大量素材没有找到合适的解决方案，于是决定自己搞下
零·素材准备
一个星星的镂空png图像 (因为是透明的，需要的小伙伴查看源代码可见图片)
两个设计给你的颜色对比值
了解下Css渐变的
壹·逻辑概述
贰·星星评分组件
2.1外部计算组件
根据传入参数计算出满星，小数点星星以及灰色星星的个数
调用星星渲染函数
- 满星则100填充高亮
- 小数点星星传入处理后的渐变百分比
- 灰色星星则无数据传入
2.2 星星填充组件
- 根据出入的数字判断是否使用渐变色
- div
checked-star-box为相对定位，内部元素绝对定位在统一位置 - 利用png的透明属性+z-index设置，底部叠加填充渐变色
2.3 使用样式
以下是组件内使用的样式
总结
我刚开始的时候也没有思路，设计也说要不先按半个星星的方案，因为网上大都是半颗星星，我查询了大多的评分方案，或是上层填色位置移动或是jquery实现的半颗星星，，我想着先试试，不行就用半颗星星，经过调研，我观察到进度条是符合小数点的，感觉完全可以按照进度条去做，最后盖个罩子，不给他显示成长方形就行了，根据这个思路，果然实现了小数级别的星星评分，从此经历得出了以下的总结：
- 不要因为设计把自己困在已有的思维里，要打破思维的墙，从不同角度看问题
- 要勇于尝试，你开始去做了，就成功了80%
以上是 react组件大众点评星星评分解决方案-精确到小数级 的全部内容， 来源链接： utcz.com/z/383178.html
