自定義評分組件，不(bù)止于(yú)1星、半星，精确到(dào)0.1星。

自定義評分組件 
實現思路

星星分兩種形态，一種代表實心評分，一種代表空心未評分。實星和(hé / huò)空星完全重疊，大(dà)小必需保持一緻，實星疊于(yú)空星之(zhī)上(shàng)，根據評分設置實星的(de)寬來(lái)顯示評分。 
全五星代表10分，一顆星就(jiù)是(shì)2分，精确到(dào)0.1，一顆星就(jiù)分爲(wéi / wèi)20份。

源碼

rating.wxml

 name="rating">
  
     class='rating-on' 
      style='width:{{rating >= 2 ? 1 : rating*10%20/20}}em'
    >
     class='rating-off'>
  
  
     class='rating-on' 
      style='width:{{rating >= 4 ? 1 : rating < 2 ? 0 : rating*10%20/20}}em'
    >
     class='rating-off'>
  
  
     class='rating-on' 
      style='width:{{rating >= 6 ? 1 : rating < 4 ? 0 : rating*10%20/20}}em'
    >
     class='rating-off'>
  
  
     class='rating-on' 
      style='width:{{rating >= 8 ? 1 : rating < 6 ? 0 : rating*10%20/20}}em'
    >
     class='rating-off'>
  
  
    
      style='width:{{rating == 10 ? 1 : rating < 8 ? 0 : rating*10%20/20}}em'
    >
     class='rating-off'>
  

rating.wxss

.rating-on {
  color: black;
  position: absolute;
  overflow: hidden;
}
.rating-off {
  color: #DBDBDB;
}
.rating-on:not(:last-child),
.rating-off:not(:last-child) {
  margin-right: 0.2em;
}

使用

page.wxml

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

page.wxss

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

我使用的(de)特殊符号，也(yě)可使用圖片，保證尺寸一緻就(jiù)行。評分組件實現方式很多，我也(yě)許是(shì)初學，若有更佳實現方式請賜教。