微信小程序开发实现星星评分组件

问题背景

小程序开发中经常会碰到需要评分的场景，比如用户满意度调查等，本文介绍微信小程序实现打星评分的一种方案。
实现效果如下：

截图2

问题分析

话不多说，直接上代码。
（1）index.wxml文件代码如下：

  
            
              很不满意
              很满意
            
            
              
              
            
          

（2）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
    })
  },
})

(3)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;
}

（4）星星选中和未选中图片如下：

问题总结

本文介绍了微信小程序实现打星评分的一种方案，有兴趣的同学可以进一步深入研究。