快速实现星星评分组件——小程序(个人笔记)

<view 
  wx:for="{{stars}}" 
  data-index="{{item.number}}" 
  bindtap="handleStarRate"
>
     <image class="" src="{{item.number<=starNum?starSelect:starNo}}"/>
</view>

data: {
  stars: [
      { number: 1 },
      { number: 2 },
      { number: 3 },
      { number: 4 },
      { number: 5 },
  ],
  starNum: 1,
  starSelect: '../../../assets/image/star_select.png',
  starNo: '../../../assets/image/star_no.png'
},
// 星星打分
handleStarRate(e) {
    this.setData({
        starNum: e.currentTarget.dataset.index
    })
}