微信小程序实现星星评分

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=1this.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.写在最后

微信小程序实现星星评分相关推荐

微信小程序实现星星评分效果
微信小程序实现星星评分效果思路很简单,小星星都是一张张独立的图片,点击的时候改变图片的路径就可以了. 我是用背景图片做的,先给盒子设置背景图片为灰色的小星星,盒子是根据js文件中的stars数组循环 ...
微信小程序实现星星评分组件(原生）
1.实现效果 2.组件介绍 3.部分代码 // components/rating/index.js Component({/*** 组件的属性列表*/properties: {stars:{type ...
微信小程序实现星星评分-整颗星星评分、半颗星星评分、任意颗星星展示
一.实现整颗星星评分(默认一颗星) 1.效果图 2.准备图片 3.remark.wxml <view class="stars"><view wx:for=&qu ...
基于微信小程序的体育课评分系统小程序
文末联系获取源码开发语言:Java 框架:ssm JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclipse/my ...
视频教程-微信小程序项目-豆瓣评分-微信开发
微信小程序项目-豆瓣评分北京八维研修学院技术工程师,5年大型项目实战开发经验,3年授课经验. 孟宪杰 ¥68.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订 ...
微信小程序实现星星评价效果
这篇文章主要为大家详细介绍了微信小程序实现星星评价效果,支持多个条目评价,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序实现星星评价效果的具体代码,供大家参考,具体内 ...
微信小程序实现笑脸评分功能
1.image方式实现的笑脸评分功能由于我这里的图片使用的不是背景图,所以实现方法跟使用背景图的方式不同你也可以使用wx:for来操作由于微信小程序需要base64格式或者网图才能设置背景图 ...
小程序实现星星评分(共10分),含有半星
完整代码地址:https://download.csdn.net/download/qq_40190624/11154051 效果图: 星星评分做为一个子组件,由父组件传入分值进行判断,具体显示几个灰 ...
微信小程序的体验评分，如何从开发者工具中调取
体验评分是一项给小程序的体验好坏打分的功能,它会在小程序运行过程中实时检查,分析出一些可能导致体验不好的地方,并且定位出哪里有问题,以及给出一些优化建议. 运行环境要求下载并安装 1.02.1808 ...

微信小程序实现星星评分

1.实现效果

2.实现原理

3.部分代码

4.写在最后

微信小程序实现星星评分相关推荐

最新文章

热门文章

微信小程序实现星星评分

1.实现效果

2.实现原理

3.部分代码

4.写在最后 insertAdIfNeeded();

微信小程序实现星星评分相关推荐

最新文章

热门文章

4.写在最后