微信小程序中怎么实现五星评价功能-创新互联

这篇文章主要介绍微信小程序中怎么实现五星评价功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

让客户满意是我们工作的目标,不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户,将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴,公司提供的服务项目有:域名注册雅安服务器托管、营销软件、网站建设、阜城网站维护、网站推广。

微信小程序 五星评价功能

话不多说,我们来看一下效果图:

微信小程序中怎么实现五星评价功能

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

接下来直接查看源码:


  满意度:
  
    '0'? 'cur icon' : 'icon'}}" data-id="1">
    '1'? 'cur icon' : 'icon'}}" data-id="2">
    '2'? 'cur icon' : 'icon'}}" data-id="3">
    '3'? 'cur icon' : 'icon'}}" data-id="4">
    '4'? 'cur icon' : 'icon'}}" data-id="5">
  

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
    });
   
 },

这样效果显示如下:

微信小程序中怎么实现五星评价功能

以上是“微信小程序中怎么实现五星评价功能”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


本文名称:微信小程序中怎么实现五星评价功能-创新互联
文章分享:http://azwzsj.com/article/ddgded.html