微信小程序之星级评分（评分不为整数）

这些天可能是星辰大海说的太多了，所以写代码的时候就遇到了星级评分的这个问题，因为星级评分你点击评分可能有半星和一星，所以展示评分的时候就会出现小数点，比如说4.1,3.7等，然后展示出来的星星就不能是一整个，当然我也看了一些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({

  /**
   * 页面的初始数据
   */
  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'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  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)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

这里比较重要的一点就是对i的使用，for循环后出来的i为i++后的i的值，然后我做出来的这个可能有些麻烦，也谈不上有什么健壮性，所以肯定有许多需要修改的地方，等到我们联调的时候有需要改正或改进的地方我会再次进行修改的。

好滴好滴，就先到这里吧！！！