這些天可能是星辰大海說的太多了，所以寫代碼的時候就遇到了星級評分的這個問題，因為星級評分你點擊評分可能有半星和一星，所以展示評分的時候就會出現(xiàn)小數(shù)點，比如說4.1,3.7等，然后展示出來的星星就不能是一整個，當(dāng)然我也看了一些APP，可能為了方便吧，采取了四舍五入取整的這種方法，也是可取的，畢竟能簡單一點，但是為了完美起見，我苦苦研究了好長時間，雖然不是很完美，而且方法可能也有些幼稚，但是也算是坎坎坷坷的解決了問題，，，哈哈哈，下面我粘一下我的代碼，希望能為可愛的你提供一點點幫助。

首先是wxml

<!--pages/test1/test1.wxml-->
<view class="score">
  <image src="../../image/score1.png" wx:for="{{ width }}" wx:key="unique" data-index="{{ index }}" style="width: {{ fontSize + 'rpx' }}; height: {{ fontSize + 'rpx' }};">
  <view class="star" style="width: {{ item + 'rpx' }}; height: {{ fontSize + 'rpx' }}; overflow:hidden;">
  <image class="star" src="{{stars[index]}}" style="width: {{fontSize + 'rpx' }}; height: {{ fontSize + 'rpx' }};">
  </image>
  </view>
  </image>
</view>

wxss

.score{
  width:40%;
  display:flex;
  justify-content: space-between;
  align-items:center;

}
.star{
  position: absolute;//這里做了定位，是將所有的塊疊在一起
  top:0;
}

js

// pages/test1/test1.js
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    stars: ['../../image/score1.png', '../../image/score1.png', '../../image/score1.png', '../../image/score1.png', '../../image/score1.png'],
    width: ['50','50','50','50','50'],
    value:0,
    active:'../../image/score2.png',
    margin: 2,
    fontSize: '50'
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {
    var newwidth=this.data.width;
    var newstars=this.data.stars
    var value= 5;
    this.setData({
      value:value
    })
    for(var i=0;i<value-1;i++){
      newwidth[i] = this.data.fontSize
      newstars[i] = this.data.active
    }
    console.log(i);
    newwidth[i] = (value-i)*this.data.fontSize
    newstars[i] = this.data.active
    console.log(newwidth[i])
    console.log(newstars[i])
    this.setData({
      width:newwidth,
      stars:newstars
    })
    console.log(this.data.width)
    console.log(this.data.stars)
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {
  
  },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom: function () {
  
  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

這里比較重要的一點就是對i的使用，for循環(huán)后出來的i為i++后的i的值，然后我做出來的這個可能有些麻煩，也談不上有什么健壯性，所以肯定有許多需要修改的地方，等到我們聯(lián)調(diào)的時候有需要改正或改進(jìn)的地方我會再次進(jìn)行修改的。

好滴好滴，就先到這里吧?。?！