小程序五星打分组件封装（支持半星）

自定义组件star-score：

star-score.js内容：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 是否只读
    disabled: {
      type: Boolean,
      value: false
    },
    // 传入的分值
    val: {
      type: Number,
      value: 0
    },
    // 星星的宽度
    starW: {
      type: Number,
      value: 40
    },
    // 星星的高度
    starH: {
      type: Number,
      value: 40
    }
  },
  /**
   * 组件的初始数据
   */
  data: {
    stars: [0, 1, 2, 3, 4],
    // 图片路径
    starNo: '../../assets/star-no.png',
    starHalf: '../../assets/star-half.png',
    starFull: '../../assets/star-Full.png'
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 选中半颗星
    _selectHalf(e) {
      let val = e.currentTarget.dataset.val
      if (this.data.val == 0.5 && e.currentTarget.dataset.val == 0.5) {
        // 只有半颗星的时候,再次点击,变为0颗
        val = 0;
      }
      this.setData({
        val: val
      })
      // 向父组件传值
      this.triggerEvent('_selectStar', this.data.val)
    },
    // 选中满星
    _selectFull(e) {
      let val = e.currentTarget.dataset.val
      this.setData({
        val: val
      })
      // 向父组件传值
      this.triggerEvent('_selectStar', this.data.val)
    }
  }
})

star-score.wxml的内容：

<!-- 五星打分组件 -->
<view>
  <block wx:for="{{stars}}" wx:key="{{index}}">
    <image class="star-image" 
           style="width: {{starW}}rpx; height: {{starH}}rpx;"
           src="{{val > item ? (val-item < 1 ? starHalf : starFull) : starNo}}">
      <view class="item" 
            style="left: 0rpx; width: {{starW}}rpx; height: {{starH}}rpx;" 
            data-val="{{item+0.5}}" 
            bindtap="{{disabled ? '' : '_selectHalf'}}"></view>
      <view class="item" 
            style="left: {{starW/2}}rpx; width: {{starW}}rpx; height: {{starH}}rpx;" 
            data-val="{{item+1}}" 
            bindtap="{{disabled ? '' : '_selectFull'}}"></view>
    </image>
  </block>
</view>

star-score.wxss的内容：

.star-image{
  position: relative;
}
.item{
  position: absolute;
  top: 0;
}

调用自定义组件star-score：

// 可选配置disabled、 starW、 starH
<star-score val="{{3}}"></star-score>

星星素材图