实现五星评价功能，效果图如下：
.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;
}