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

问题背景

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

问题分析

话不多说，直接上代码。 （1）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? '../../static/img/startFull.png' : '../../static/img/star.png'}}"></image>
            </view>
          </view>
</view>

（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）星星选中和未选中图片如下：

问题总结

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