話不多說，我們來看一下效果圖：

要實現的效果：點擊到第幾顆星，就要顯示到第幾顆星,

接下來直接查看源碼：

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

這樣效果顯示如下：