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

1,974 阅读2分钟

背景

现在的大多数评分组件是精确到半颗星星的,例如:antd的评分组件 在这里插入图片描述 但是如果遇到精确细节的产品,他会要求成这样精确到小数位 在这里插入图片描述 大众点评也是这样的 在这里插入图片描述 想要做到细致到小数的效果要怎么做呢?我找了大量素材没有找到合适的解决方案,于是决定自己搞下

零·素材准备

  • 一个星星的镂空png图像 (因为是透明的,需要的小伙伴查看源代码可见图片)在这里插入图片描述

  • 两个设计给你的颜色对比值

  • 了解下Css渐变的知识

壹·逻辑概述

在这里插入图片描述
逻辑思维图

贰·星星评分组件

在这里插入图片描述
效果展示

2.1外部计算组件

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

  • 满星则100填充高亮
  • 小数点星星传入处理后的渐变百分比
  • 灰色星星则无数据传入
在这里插入图片描述
外部组件

2.2 星星填充组件

  • 根据出入的数字判断是否使用渐变色
  • div checked-star-box 为相对定位,内部元素绝对定位在统一位置
  • 利用png的透明属性+z-index设置,底部叠加填充渐变色 在这里插入图片描述
在这里插入图片描述
星星填充组件

2.3 使用样式

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

总结

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

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

本文使用 mdnice 排版