小程序自定义评分组件（精确度0.1星）

自定义评分组件，不止于1星、半星，精确到0.1星。

自定义评分组件 
实现思路

星星分两种形态，一种代表实心评分，一种代表空心未评分。实星和空星完全重叠，大小必需保持一致，实星叠于空星之上，根据评分设置实星的宽来显示评分。 
全五星代表10分，一颗星就是2分，精确到0.1，一颗星就分为20份。

源码

rating.wxml

1. name="rating">
3. class='rating-on'
4. style='width:{{rating >= 2 ? 1 : rating*10%20/20}}em'
5. >
6. class='rating-off'>
7.  
9. class='rating-on'
10. style='width:{{rating >= 4 ? 1 : rating < 2 ? 0 : rating*10%20/20}}em'
11. >
12. class='rating-off'>
13.  
15. class='rating-on'
16. style='width:{{rating >= 6 ? 1 : rating < 4 ? 0 : rating*10%20/20}}em'
17. >
18. class='rating-off'>
19.  
21. class='rating-on'
22. style='width:{{rating >= 8 ? 1 : rating < 6 ? 0 : rating*10%20/20}}em'
23. >
24. class='rating-off'>
25.  
28. style='width:{{rating == 10 ? 1 : rating < 8 ? 0 : rating*10%20/20}}em'
29. >
30. class='rating-off'>
31.  
32.  

rating.wxss

1. .rating-on {
2. color: black;
3. position: absolute;
4. overflow: hidden;
5. }
6. .rating-off {
7. color: #DBDBDB;
8. }
9. .rating-on:not(:last-child),
10. .rating-off:not(:last-child) {
11. margin-right: 0.2em;
12. }

使用

page.wxml

1. src='../common/rating/rating.wxml' />
2. is='rating' data='{{rating:rating.average}}' />

page.wxss

1. @import '../common/rating/rating';

我使用的特殊符号，也可使用图片，保证尺寸一致就行。评分组件实现方式很多，我也许是初学，若有更佳实现方式请赐教。