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

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

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

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

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

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