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

<view class="star-title">1、品质效果</view><view class="star-pos">  <image class='stars' bindtap="changeColor" data-index='0' data-no="{{item}}" wx:for="{{stardata}}"        src="{{flag[0]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />  <view style='margin-left: 30rpx;'>{{startext[0]}}</view></view><view class="star-title">2、服务质量</view> <view class="star-pos">  <image class='stars' bindtap="changeColor" data-index='1' data-no="{{item}}" wx:for="{{stardata}}"          src="{{flag[1]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />  <view style='margin-left: 30rpx;'>{{startext[1]}}</view></view><view class="star-title">3、综合管理</view><view class="star-pos">  <image class='stars' bindtap="changeColor" data-index='2' data-no="{{item}}" wx:for="{{stardata}}"        src="{{flag[2]>=item? '../../images/icon/star1.png': '../../images/icon/star0.png'}}" />  <view style='margin-left: 30rpx;'>{{startext[2]}}</view></view>

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]: '非常满意'        });      }  },})

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