小程序实现评分效果

star.wxml

<view class="conts_li">
    <text>评分: </text> 
    <block wx:for="{{[0,1,2,3,4]}}" wx:for-item="i">
      <block wx:if="{{flag > i}}">
        <i class="icon iconfont icon-star" bindtap="clickstar" data-index="{{index}}" style="color:red;font-size:40rpx;"></i>
      </block>
      <block wx:else>
        <i class="icon iconfont icon-star" bindtap="clickstar" data-index="{{index}}" style="font-size:40rpx;"></i>
      </block>
    </block>
  </view>

star.js

const app = getApp();
Page({

  data: {
    flag:0 //默认红星星数量
  },
  //点击星星评分
  clickstar:function(e){
   	//获取当前点击的星星个数,因为index是从0开始所以需+1
    var index = e.currentTarget.dataset.index;
    this.setData({
      flag:index+1
    })
  },
  onShareAppMessage: function () {

  }
})