推广小程序的方法_微信小程序怎么完成五星评价

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

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

效果

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

接下来直接查看源码：

 view 
 text 满意度： /text 
 view 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
 }); 
 },

这样效果显示如下：

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