前端实现带小数的展示五星好评效果【以钉钉开发为例，微信同理】

网页前端实现五星好评效果【这里以钉钉小程序开发为例】

在做钉钉开发中，遇到的展示星级好评【需求是带有一味小数的】

这里是自己的解决方法。

index.axml

<!-- index.axml -->
<view class="block">
  <view a:for="{{ width }}" a:for-index="index" a:for-item="item">
    <view class="starBlock" style="width: {{ '30rpx' }}; height: {{  '30rpx' }};">
      <image src="../../image/noFollow.png" style="width: {{'30rpx' }}; height: {{ '30rpx' }};">
      </image>
      <view class="star" style="width: {{width[index] + 'rpx' }}; height: {{ size + 'rpx' }};overflow:hidden;" >
        <image class="star" src="{{stars[index]}}" style="width: {{size + 'rpx' }}; height: {{ size + 'rpx' }};">
        </image>
      </view>
    </view>
  </view>
</view>

index.acss

/* index.acss */
.block view {
  display: inline-block;
  margin-right: 4rpx;
}
.starBlock {
  position: relative;
}
.star{
  position: absolute;
  top:0;
  left: 0;
}

　index.js

Page({

  data: {
    stars: ['../../image/noFollow.png', '../../image/noFollow.png','../../image/noFollow.png', '../../image/noFollow.png', '../../image/noFollow.png'],
    width: ['30','30','30','30','30'],
    value:0,
    active:'../../image/follow.png',
    margin: 2,
    size: '30'
  },
    onShow()  {
    var newwidth=this.data.width;
    var newstars=this.data.stars
    var value= 3.3;
    this.setData({
      value:value
    })
    for(var i=0;i<value-1;i++){
      newwidth[i] = this.data.size
      newstars[i] = this.data.active
    }
    newwidth[i] = (value-i)*this.data.size
    newstars[i] = this.data.active
    this.setData({
      width:newwidth,
      stars:newstars
    })
    this.setData({
      fff: 'show'
    })
  },


})

　　这里的解决方案是用上层评分图片按照比例去覆盖原来的未得评分的图片，在上层评分图片加了一个父元素，整数的部分全部覆盖，另外多余的小数的父元素设置其宽度为小数的占比，用overflow:hidden; 来隐藏多出的部分。实现的方法还在优化中， 有待更新。