微信小程序实现的五星评价功能示例

本文实例讲述了微信小程序实现的五星评价功能。分享给大家供大家参考，具体如下：

实现五星评价功能，效果图如下：

.wxml文件：

1、品质效果

  
  {{startext[0]}}

2、服务质量
 
  
  {{startext[1]}}

3、综合管理

  
  {{startext[2]}}

.js 文件：

page: ({
  data: {
      flag:[0, 0, 0],
      startext: ['', '', ''],
      stardata: [1, 2, 3, 4, 5],
    },
    // 五星评价事件
    changeColor: function (e) {
      var index = e.currentTarget.dataset.index;
      var num = e.currentTarget.dataset.no;
      var a = 'flag[' + index + ']';
      var b = 'startext[' + index + ']';
      var that = this;
      if(num == 1) {
 that.setData({
   [a]: 1,
   [b]: '非常不满意'
 });
      } else if (num == 2){
 that.setData({
   [a]: 2,
   [b]: '不满意'
 });
      } else if (num == 3) {
 that.setData({
   [a]: 3,
   [b]: '一般'
 });
      } else if (num == 4) {
 that.setData({
   [a]: 4,
   [b]: '满意'
 });
      } else if (num == 5) {
 that.setData({
   [a]: 5,
   [b]: '非常满意'
 });
      }
  },
})

.wxss文件：

.star-pos {
  margin: 10rpx;
  display: flex;
  flex-direction: row;
}
.stars{
  width: 40rpx;
  height: 40rpx;
  margin-left: 30rpx;
}

希望本文所述对大家微信小程序开发有所帮助。