项目中遇到的评分相关的需求其实还挺多。之前也写过网页中关于评分功能实现的文档。这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用。这次使用的还是字体,主要是字体这个比较通用,颜色,大小都可以自己定义。当然了,来的最快的其实是用图片代替。

  1.如果是静态实现,可以直接设置宽度来实现评分效果,直接定义需要变色的五角形的比例。如果是颗星可以直接定义伪类元素宽度是50%;如果是1/3颗星可以定义宽度是33%;同样的,如果是2/3颗星星,直接定义宽度为66%。如下

  1.样式同(二、微信小程序中评分功能实现)上。只是定义宽度的地方是动态赋值的。

  2.定义需要展示的初始属性值。分别是要展示的黄色五角星,灰色五角星,以及那颗需要打分的的黄色五角星

  4.最后一步就是页面中如何渲染的问题了。由于微信小程序中无法实现动态修改伪类元素的样式值【可能是我不会,会的同学可以指点一下】,所以,那颗占百分比的黄色五角星,我用的是底部一个灰色五角星+覆盖一个黄色五角星,都是用的绝对定位,最后黄色五角星用的是width+overflow:hidden 把多余的部位隐藏了。

  这个效果的实现无非就三点。第一点引用字体。第二点比较重要,就是如何用css画出想要的五角星,至于动态实现那块其实一点也不难,思路清晰了,自然就水到渠成了。

  EBET易博官方网站