先看程式碼，用一個元件寫好星星元件，然後呼叫即可

rating.wxml

<view class='itembox'>
  <view wx:for="{{imgs}}" wx:key="{{item.id}}" bindtap='select' data-index="{{item.id}}">
    <image class="star" src="{{item.id>starId?src2:src1}}"></image>
  </view>
  <view class='scorePin'>{{starId}}.00</view>
</view>
 

rating.js

// component/rating/index.js
Component({
  /**
   * 元件的屬性列表
   */
  properties: {
 
  },

  /**
   * 元件的初始資料
   */
  data: {
    imgs: [{
      id: 1
    }, {
      id: 2
    }, {
      id: 3
    }, {
      id: 4
    }, {
      id: 5
    }],
    starId: 5,
    src1: '/images/star.png',
    src2: '/images/grayStar.png',
  },

  /**
   * 元件的方法列表
   */
  methods: {
    select(e) {
      console.log(e)
      this.data.starId = e.currentTarget.dataset.index;
      this.setData({
        starId: this.data.starId
      })
    }
  }
})
 

rating.wxss

.itembox {
  display: flex;
  align-items: center;
}
.scorePin{
  font-size:26rpx;
  font-weight: 600;
}

.star {
  width: 50rpx;
  height: 50rpx;
  margin: 0 5rpx;
  vertical-align: middle;
}

然後引用即可使用

這裡通過迴圈判斷顯示有色和無色的星星，這是關鍵點

 <view wx:for="{{imgs}}" wx:key="{{item.id}}" bindtap='select' data-index="{{item.id}}">
    <image class="star" src="{{item.id>starId?src2:src1}}"></image>
  </view>
 

還有一個問題是如何顯示4.2評分的星星，這個問題知道的道友可以提示下