星級評價的實現

背景： 對產品進行評價時，很多時候我們會用星級進行展示，如下：比分值展示 更加直觀友好。
實現：下面就對其不同的需求給其不同的實現方案
1、以粉星展示，星級值為整數個
方案：切一個星星；取到星級值，迴圈星星展示即可。
過程：略
效果：

2、以粉星和灰星展示，以顯示滿格需求，星級粗取值為整數個
方案：切一個粉星一個灰星；取到星級值，先迴圈星星展示粉星；再用 滿格值(這裡取5)－星級值 得到 灰星值，迴圈展示灰星 即可。
過程：略
效果：
3、以粉星和灰星展示，但星級要精取值為小數，此時就要複雜一些了，
方案：（1）首先我們需要把所有的粉／灰星各放在一起各切一條，
（2）以灰色星條為背景父級盒子，以粉色星條為裡子級盒覆蓋在灰色星條上，給父級以具體寬度值（灰星值也就是滿格是已知的），而子級的寬度（也是關鍵所在）以百分比的形式賦值且按返回值計算，
結構：<view class="stars"> <view class="starsBox" style="width:{{manyi_val_per}}%"></view> </view>
如何計算：這裡有兩種方式。 一種是以個數比，（粉星值／灰星值）100% 即可；一種是寬度值比，更精確一些的，就是要把星星之間的間距也精確考慮在內，為了便於描述，先設一些值，已知星星的寬度為w0，星與星的間距為d0，灰星（滿格）為n0，此時我們便知css賦值灰星條長度為w1（亦即w0n0+d0(n0-1)），返回粉星值為n（為float型），求 粉星條佔據灰星條的百分比manyi_val_per。公式為：manyi_val_per ＝ ((nw0+Math.floot(n)*d0)／w1).toFixed(2)
效果展示：
Notes：
＊子級的取值為什麼要用百分比，而不是px/rem單位值？
主要是在對像數進行適配的時候，在不同的裝置下，dpr變化時，灰色寬度隨著變化，但計算出的粉色寬度具體值不隨著變化，而粉色寬度是以style的方式渲染，就會導致寬度顯示不正確；如果使用了百分比，父級變化時，子級也會隨著按比例變化，符合了我們的需求。