微信小程序实现星星评分效果

桃扇骨 2022-04-04 05:17 367阅读 0赞

思路很简单，小星星都是一张张独立的图片，点击的时候改变图片的路径就可以了。  
我是用背景图片做的，先给盒子设置背景图片为灰色的小星星，盒子是根据js文件中的stars数组循环出来的，根据flag的值确定是灰色的小星星还是黄色的小星星，点击的时候获取当下这个盒子的index值，然后去更改stars数组中索引值小于等于index的每一项的flag就可以了。  
当然，也可以用类名来控制灰色和黄色的小星星，在点击的时候操作类名也是可以实现的。

.stars{
      padding:85rpx 0 60rpx 273rpx;
      box-sizing: border-box;
      position: relative;
      border-bottom: 1rpx solid #ececec;
      background-color: #fff;
    }
    .stars image{
      width: 190rpx;
      height: 190rpx;
      border: 1rpx solid #000;
      position: absolute;
      top: 41rpx;
      left: 36rpx;
    }
    .stars .content view{
      font-size: 32rpx;
      color: #4a4a4a;
    }
    .stars .content>view:last-of-type{
      height: 40rpx;
      margin-top: 48rpx;
    }
    .stars .content>view:last-of-type view{
      float: left;
      width: 42rpx;
      height: 42rpx;
      margin-right: 25rpx;
      background-size: 100% 100%;
    }

data: {
        stars:[
          {
            flag:1,
            bgImg: "http://wximg.youtasc.com/star.png",
            bgfImg:"http://wximg.youtasc.com/f_star.png"
          },
          {
            flag: 1,
            bgImg: "http://wximg.youtasc.com/star.png",
            bgfImg: "http://wximg.youtasc.com/f_star.png"
          },
          {
            flag: 1,
            bgImg: "http://wximg.youtasc.com/star.png",
            bgfImg: "http://wximg.youtasc.com/f_star.png"
          },
          {
            flag: 1,
            bgImg: "http://wximg.youtasc.com/star.png",
            bgfImg: "http://wximg.youtasc.com/f_star.png"
          },
          {
            flag: 1,
            bgImg: "http://wximg.youtasc.com/star.png",
            bgfImg: "http://wximg.youtasc.com/f_star.png"
          }
        ]
      },
      score:function(e){
        var that=this;
        for(var i=0;i<that.data.stars.length;i++){
          var allItem = 'stars['+i+'].flag';
          that.setData({
            [allItem]: 1
          })
        }
        var index=e.currentTarget.dataset.index;
        for(var i=0;i<=index;i++){
          var item = 'stars['+i+'].flag';
          that.setData({
            [item]:2
          })
        }
      }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1][]

转载地址：[https://blog.csdn.net/weixin\_41257563/article/details/82756738][https_blog.csdn.net_weixin_41257563_article_details_82756738]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220404/288e4dedc1d84ec383efd831612eef39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70 1]: /images/20220404/a4aa3ec880a44aa692dc717681753bf3.png
[https_blog.csdn.net_weixin_41257563_article_details_82756738]: https://blog.csdn.net/weixin_41257563/article/details/82756738