知识分享
分享创造价值 合作实现共赢

知识分享

当前位置: 首页 > 知识分享

微信小程序五星评分效果

发布时间:2019-12-16 21:32:40作者:admin点击:

分享者:小强
很多做过电商项目的朋友会经常用到评分的功能,我这里正好写了一个例子,发出来分享一下:

我写的是5分满分制的,首先,准备3个图片,

,像这样的,分别代表分数为0,0.5,1 时的状态,

效果图:(以3.5为例)

然后上代码:

js:

function pingfenxing(pingfen){     var that=this,  //这里是图片的路径,自己需要改         data={         ling:"img/pingfen0.png",         zheng:"img/pingfen2.png",         ban:"img/pingfen1.png"    },         nums=[];//这里是返回图片排列的顺序的数组,这里要注意在页面使用的时候图片的路径,不过使用网络图片无所谓    if((pingfen/0.5)%2==0){//如果评分为整数,如4.0、5.0          for(var i=0;i<5;i++){            if(i              nums.push(data.zheng);            }else{              nums.push(data.ling);            }          }      }else{//评分不为整数,如3.5、2.5          for(var i=0;i<5;i++){            if(i              nums.push(data.zheng);//先把整数分离出来,如:3.5,这里就是先把3分离出来,把代表1的图片放进去            }else if(i==(pingfen-0.5)){              nums.push(data.ban);//把小数的部分分离出来,如:3.5里的0.5,把代表0.5的图片放进去            }else{              nums.push(data.ling);//然后剩下的就是没有满的用代表0的图片放进去,如:3.5,里面放进去了3个代表1的图片,然后放入了1个代表0.5的图片,最后还剩一个图片的位置,这时候就放代表0的图片            }          }      }       return num; } module.exports = {   pingfen:pingfenxing }

WXML代码: