微信小程序之五星评价功能制作

这篇文章主要介绍了微信小程序 五星评价功能的实现的相关资料,这里附有实例代码及实现效果图，需要的朋友可以参考下

微信小程序 五星评价功能

话不多说，我们来看一下效果图：

要实现的效果：点击到第几颗星，就要显示到第几颗星,

  接下来直接查看源码：

 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
 },
 这样效果显示如下：

感谢阅读，希望帮助到大家，谢谢大家对本站的支持！
以上就是微信小程序之五星评价功能制作的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！