小程序实现星评点击

index.wxml

<view class="vertical-star-item">
    <view class="starts-description">
      <text style="font-size: 30rpx;">很不满意</text>
      <text style="font-size: 30rpx;">很满意</text>
    </view>
    <view class="brightStars">
      <!-- answers[String(index)] -->
      <image class="image-item" wx:for="{{starsBox}}" wx:key="index" wx:for-index="index" wx:for-item="{{item}}" data-index="{{index}}" bindtap="changePic" src="{{index<=answer? '../../../images/startFull.png' : '../../../images/star.png'}}"></image>
    </view>
</view>

index.wxss

.vertical-star-item {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 70%;
}

.starts-description {
  display: flex;
  justify-content: space-between;
}

.brightStars{
  display: flex;
  flex-direction: row;
}

.image-item{
  width: 50px;
  height: 50px;
}

index.js

// const rsaUtil = require('../../utils/RSAUtil')

// pages/healdata/healthydata.ts
Page({
  /**
   * 页面的初始数据
   */
  data: {
    starsBox: [1, 1, 1, 1, 1],
    answer: -1
  },
    /**
   * 评分组件选中处理 
   */
  changePic: function (e) {
    let f = this
    console.log(e.currentTarget.dataset)
    var index = e.currentTarget.dataset.index
    console.log(index)

    f.setData({
      answer: index
    })
  },
})

参考：https://download.csdn.net/blog/column/12293914/131308912