Wechat applet development and implementation of star rating component

problem background

Scenarios that require scoring are often encountered in the development of small programs, such as user satisfaction surveys. This article introduces a solution for WeChat small programs to achieve star rating.
The effect is as follows:

Screenshot 2

problem analysis

Not much to say, just go to the code.
(1) The index.wxml file code is as follows:

  <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? '../../static/img/startFull.png' : '../../static/img/star.png'}}"></image>
            </view>
          </view>
</view>

(2) index.js file, the code is as follows:

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
    })
  },
})

(3) index.wxss file, the code is as follows:

.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;
}

(4) Star selected and unselected pictures are as follows:

conclusion of issue

This article introduces a scheme for WeChat mini-programs to achieve star scoring. Interested students can further study in depth.