小程序实现五星点评效果

<!--星星评价-->
  <view class=\"comment1-de ion\" style=\"display:flex;flex-direction:row;\">
  <view class=\"comment1-de ion1\">描述相符</view>
  <view class=\"star-pos\" style=\"display:flex;flex-direction:row;\">
    <view class=\"stars {{flag0>=1? \'on\': \'\'}}\" bindtap=\"changeColor1\"></view>
    <view class=\"stars {{flag0>=2? \'on\': \'\'}}\" bindtap=\"changeColor2\"></view>
    <view class=\"stars {{flag0>=3? \'on\': \'\'}}\" bindtap=\"changeColor3\"></view>
    <view class=\"stars {{flag0>=4? \'on\': \'\'}}\" bindtap=\"changeColor4\"></view>
    <view class=\"stars {{flag0>=5? \'on\': \'\'}}\" bindtap=\"changeColor5\"></view>
</view>
</view>

Page({
 data:{
   flag:0
 },
 changeColor1:function(){
    var that = this;
    that.setData( {
      flag: 1
    });
 },
 changeColor2:function(){
    var that = this;
    that.setData( {
      flag:2
    });
  },
 changeColor3:function(){
    var that = this;
    that.setData( {
      flag: 3
    });
  },
 changeColor4:function(){
    var that = this;
    that.setData( {
      flag:4
    });
  },
 changeColor5:function(){
    var that = this;
    that.setData( {
      flag: 5
    });
  },

/*星星的样式*/
.stars{
  background-image: url(\"http://m.dev.vd.cn/static/xcx/v1/goo/star(灰)@1.5x.png\");
  width: 43rpx;
  height: 43rpx;
  background-size: 43rpx 43rpx;
  margin-left: 40rpx;
}
.on{
  background-image: url(\"http://m.dev.vd.cn/static/xcx/v1/goo/star@1.5x.png\");
  width: 43rpx;
  height: 43rpx;
  background-size: 43rpx 43rpx;
  /*margin-left: 10px;*/
}