话不多说，我们来看一下效果图：
要实现的效果：点击到第几颗星，就要显示到第几颗星,
接下来直接查看源码：
|
1
2
3
4
5
6
7
8
9
10
|
<view class="l-evalbox
row">
<text class="l-evaltxt">满意度：</text>
<view class="l-evalist
flex-1" bindtap="chooseicon">
<icon class="{{tabArr.curHdIndex
>'0'? 'cur icon' : 'icon'}}" data-id="1"></icon>
<icon class="{{tabArr.curHdIndex
>'1'? 'cur icon' : 'icon'}}" data-id="2"></icon>
<icon class="{{tabArr.curHdIndex
>'2'? 'cur icon' : 'icon'}}" data-id="3"></icon>
<icon class="{{tabArr.curHdIndex
>'3'? 'cur icon' : 'icon'}}" data-id="4"></icon>
<icon class="{{tabArr.curHdIndex
>'4'? 'cur icon' : 'icon'}}" data-id="5"></icon>
</view>
</view>
|
css如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
.l-evalbox{
height:
100rpx;
padding:
0 3%;
margin-top:
10rpx;
background:
#FFF;
line-height:
100rpx;
}
.l-evaltxt{
width:
120rpx;
display:
block;
font-size:
26rpx;
color:
#666666;
}
.l-evalist
.icon{
background-position:
-77rpx -246rpx;
width:
40rpx;
height:
43rpx;
margin-right:
30rpx;
}
.l-evalist
.cur{
background-position:
-128rpx -246rpx;
}
.l-evalist
.icon:last-child{
margin:
0;
}
|
js代码如下：
|
1
2
3
4
5
6
7
8
9
10
|
chooseicon:function(e){
var strnumber=e.target.dataset.id;
var _obj={};
_obj.curHdIndex=strnumber;
this.setData({
tabArr:
_obj
});
},
|
这样效果显示如下：