看，田野里的玉米露出了笑脸，秋风吹过，闪烁着太阳的光芒，秋天是金色的。看满山的枫叶，红得就像一团火焰在熊熊燃烧，散发着生机，秋天是红色的。呵呵，我们都错了，秋天不是金黄的，也不是红色的，秋天是五颜六色的。
本文实例讲述了微信小程序实现的五星评价功能。分享给大家供大家参考，具体如下：
实现五星评价功能，效果图如下：
.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;
}
希望本文所述对大家微信小程序开发有所帮助。
到此这篇关于微信小程序实现的五星评价功能示例就介绍到这了。要想人模人样地站在人前，背后要吃很多的苦，我想我正处于吃苦的阶段，以后未必能人模人样站在人前，但还是要努力不是幺。要知道，所有的努力都是值得的，努力做好任何事。更多相关微信小程序实现的五星评价功能示例内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
