话不多说,我们来看一下效果图:
要实现的效果:点击到第几颗星,就要显示到第几颗星,
接下来直接查看源码:
-
<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如下:
-
.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代码如下:
-
chooseicon:function(e){
-
var strnumber=e.target.dataset.id;
-
var _obj={};
-
_obj.curHdIndex=strnumber;
-
this.setData({
-
tabArr: _obj
-
});
-
},
这样效果显示如下: