微信小程序实现星星评分效果
这篇文章主要为大家详细介绍了微信小程序实现星星评分效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现星星评分的具体代码，供大家参考，具体内容如下
思路很简单，小星星都是一张张独立的图片，点击的时候改变图片的路径就可以了。
我是用背景图片做的，先给盒子设置背景图片为灰色的小星星，盒子是根据js文件中的stars数组循环出来的，根据flag的值确定是灰色的小星星还是黄色的小星星，点击的时候获取当下这个盒子的index值，然后去更改stars数组中索引值小于等于index的每一项的flag就可以了。
当然，也可以用类名来控制灰色和黄色的小星星，在点击的时候操作类名也是可以实现的。
实现代码如下：
*.wxml文件
view
view
image src='' /image
view
view 评分 /view
view
view wx:for="{{stars}}" wx:key="" style='background:url("{{item.flag==1 item.bgImg:item.bgfImg}}") no-repeat top; background-size:100%;' data-index="{{index}}" bindtap='score' /view
/view
/view
/view
view
textarea placeholder='请写下购买体会或商品的相关信息，可以拉其他小伙伴提供参考~（评价在100字以内）' /textarea
/view
/view
代码分析：
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。