自定義評(píng)分組件，不止于1星、半星，精確到0.1星。

自定義評(píng)分組件 
實(shí)現(xiàn)思路

星星分兩種形態(tài)，一種代表實(shí)心評(píng)分，一種代表空心未評(píng)分。實(shí)星和空星完全重疊，大小必需保持一致，實(shí)星疊于空星之上，根據(jù)評(píng)分設(shè)置實(shí)星的寬來顯示評(píng)分。 
全五星代表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';

我使用的特殊符號(hào)，也可使用圖片，保證尺寸一致就行。評(píng)分組件實(shí)現(xiàn)方式很多，我也許是初學(xué)，若有更佳實(shí)現(xiàn)方式請(qǐng)賜教。