本文實例講述了微信小程序實現的五星評價功能。分享給大家供大家參考，具體如下：

實現五星評價功能，效果圖如下：

.wxml文件：

<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>

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

希望本文所述對大家微信小程序開發有所幫助。