微信小程序五星评价功能的制作方法全面剖析

<view class="l-evalbox row">

  <text class="l-evaltxt">满意度：</text>

  <view class="l-evalist flex-1" bindtap="chooseicon">

    <icon class="{{tabArr.curHdIndex >&#39;0&#39;? &#39;cur icon&#39; : &#39;icon&#39;}}" data-id="1"></icon>

    <icon class="{{tabArr.curHdIndex >&#39;1&#39;? &#39;cur icon&#39; : &#39;icon&#39;}}" data-id="2"></icon>

    <icon class="{{tabArr.curHdIndex >&#39;2&#39;? &#39;cur icon&#39; : &#39;icon&#39;}}" data-id="3"></icon>

    <icon class="{{tabArr.curHdIndex >&#39;3&#39;? &#39;cur icon&#39; : &#39;icon&#39;}}" data-id="4"></icon>

    <icon class="{{tabArr.curHdIndex >&#39;4&#39;? &#39;cur icon&#39; : &#39;icon&#39;}}" data-id="5"></icon>

  </view>

</view>

.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;

}

chooseicon:function(e){

  var strnumber=e.target.dataset.id;

   var _obj={};

    _obj.curHdIndex=strnumber;

    this.setData({

     tabArr: _obj

    });

 },