微信小程序动态加星评论

wxml

<view class="xing">
  <view class="score">评分：{{yes}}</view>
  <image src="/icon/xing.png" wx:for="{{yes}}" wx:key="id" bindtap="clickplus" data-indexplus="{{index+1}}" ></image>
  <image src="/icon/xing1.png" wx:for="{{no}}" wx:key="id" bindtap="clickreduce" data-indexreduce="{{index+1}}"></image>
</view>

wxss

.xing{
  padding: 50rpx 160rpx;
}
.xing>image{
  width: 80rpx;
  height: 80rpx;
}
.userimage{
  width: 150rpx;
  height: 150rpx;
}
.score{
  width: 100%;
  text-align: center;
}

wxjs

 data: {
 	//开始的亮星数量和灰色星数量
    yes:5,
    no:0
  },
  //点击亮星执行函数
  clickplus:function(e){
    let index = e.currentTarget.dataset.indexplus;
    let yes = this.data.yes;
    let no = this.data.no;
    this.setData({
      yes:index,
      no:5 - index
    })
  },
  //点击灰色星执行的函数
  clickreduce:function(e){
    let index = e.currentTarget.dataset.indexreduce;
    let yes = this.data.yes;
    let no = this.data.no;
    this.setData({
      yes:index + yes,
      no:no - index
    })
  },

获取亮星和灰色星的数量，通过点击事件传回点击下标来计算亮星和灰色星的数量从而达到效果