微信小程序 五星评价功能的实现
发布于 2017-07-11 08:48:44 | 238 次阅读 | 评论: 0 | 来源: 网友投递
小程序 微信小程序
微信小程序（weixinxiaochengxu），简称小程序，缩写XCX，英文名mini program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
这篇文章主要介绍了微信小程序 五星评价功能的实现的相关资料,这里附有实例代码及实现效果图，需要的朋友可以参考下
微信小程序 五星评价功能
话不多说，我们来看一下效果图：
要实现的效果：点击到第几颗星，就要显示到第几颗星,
接下来直接查看源码：
<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;
}
js代码如下：
chooseicon:function(e){
var strnumber=e.target.dataset.id;
var _obj={};
_obj.curHdIndex=strnumber;
this.setData({
tabArr: _obj
});
},
这样效果显示如下：
感谢阅读，希望帮助到大家，谢谢大家对本站的支持！
推荐阅读
最新资讯