这篇文章主要为大家详细介绍了微信小程序实现星星评分效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现星星评分的具体代码，供大家参考，具体内容如下
思路很简单，小星星都是一张张独立的图片，点击的时候改变图片的路径就可以了。
我是用背景图片做的，先给盒子设置背景图片为灰色的小星星，盒子是根据js文件中的stars数组循环出来的，根据flag的值确定是灰色的小星星还是黄色的小星星，点击的时候获取当下这个盒子的index值，然后去更改stars数组中索引值小于等于index的每一项的flag就可以了。
当然，也可以用类名来控制灰色和黄色的小星星，在点击的时候操作类名也是可以实现的。
实现代码如下：
*.wxml文件 评分
*.wxss文件 .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%; }
*.js文件 data: { stars:[ { flag:1, bgImg: "/star.png-600", bgfImg:"/f_star.png-600" }, { flag: 1, bgImg: "/star.png-600", bgfImg: "/f_star.png-600" }, { flag: 1, bgImg: "/star.png-600", bgfImg: "/f_star.png-600" }, { flag: 1, bgImg: "/star.png-600", bgfImg: "/f_star.png-600" }, { flag: 1, bgImg: "/star.png-600", bgfImg: "/f_star.png-600" } ] }, 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 }) } },
代码分析：
效果图：
以上就是微信小程序实现星星评分效果的详细内容，更多请关注本站其它相关文章！
