全国服务热线:4008-888-888

公司新闻

定制微信小程序开发_微信小程序完成星星评分效

微信小程序实现星星评分效果       这篇文章主要为大家详细介绍了微信小程序实现星星评分效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现星星评分的具体代码,供大家参考,具体内容如下

思路很简单,小星星都是一张张独立的图片,点击的时候改变图片的路径就可以了。
我是用背景图片做的,先给盒子设置背景图片为灰色的小星星,盒子是根据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 

代码分析:

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服