微信小程序实现星星评分

1.实现效果

点击星星 =》文字相应选中
点击文字=》星星相应的选中1-5个

2.实现原理

1.默认所有星星的选中值为1,1表示不选中，2表示选中。

2.获取当前星星的index值，假设此时选中星星的index=1，表示选中为第二个星星，则对星星列表进行2次循环，设置每一项的选中值为2，当为2显示选中的星星图片，反之未选择的状态。

3.获取此时选中值为2的列表长度，此假设情况下为2，为文字设置三元样式判断，若2等于index+1即为选中状态。

4.当点击文字的时候，将data-index写成4-index，（因为此时1颗星是index==0的情况，表示的极差，与之对应的文字索引为4。）

3.部分代码

checkScore(e){
    this.data.stars.forEach(item=>{
      item.flag=1
      this.setData({
        stars:this.data.stars
      })
    })
    
    var index=e.currentTarget.dataset.index;
    for(var i=0;i<=index;i++){
      var item = 'stars['+i+'].flag';
      this.setData({
        [item]:2
      })
    }
    let a=this.data.stars.filter(item=>item.flag==2)
    this.setData({
      chosedStar:6-a.length
    })
  },

4.写在最后🍒

看完本文如果觉得有用，记得点赞+关注+收藏鸭 🍕

更多小程序相关，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~