微信小程序如何实现五星评价功能

这篇文章主要介绍了微信小程序如何实现五星评价功能,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

效果

要实现的效果：点击到第几颗星，就要显示到第几颗星,<br data-filtered=\”filtered\”>/////////////////

接下来直接查看源码：

<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<br data-filtered=\"filtered\"><br data-filtered=\"filtered\">

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;
}<br data-filtered=\"filtered\">

js代码如下：

chooseicon:function(e){
   
 var strnumber=e.target.dataset.id;
  var _obj={};
  _obj.curHdIndex=strnumber;
  this.setData({
   tabArr: _obj
  });  
 },

这样效果显示如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。