話不多說,我們來看一下效果圖:
要實現(xiàn)的效果:點擊到第幾顆星,就要顯示到第幾顆星,
接下來直接查看源碼:
<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
});
},
這樣效果顯示如下:
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務