微信小程序之5星评价技巧制作
[摘要]这篇文章主要介绍了微信小程序 五星评价功能的实现的相关资料,这里附有实例代码及实现效果图，需要的朋友可以参考下微信小程序 五星评价功能话不多说，我们来看一下效果图：要实现的效果：点击到第几颗星，就要...
这篇文章主要介绍了微信小程序 五星评价功能的实现的相关资料,这里附有实例代码及实现效果图，需要的朋友可以参考下微信小程序 五星评价功能
话不多说，我们来看一下效果图：
要实现的效果：点击到第几颗星，就要显示到第几颗星,
接下来直接查看源码：
<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;
}