话不多说,我们来看一下效果图:
要实现的效果:点击到第几颗星,就要显示到第几颗星,
接下来直接查看源码:
- <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
- });
- },
这样效果显示如下: