微信小程序开发之满意度（五星评分）功能实现教程

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

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

接下来直接查看源码：

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

这样效果显示如下：