java前端实现打星评价_【前端】H5 + 微信小程序实现评价星级

评价星星的逻辑是先用五个未填充的星星显示在界面上，然后当用户点击到某一个星星，比如点击了第三个星星，则将前三个星星循环用有填充的星星替代，这样便感觉是选中了三个星星一样。

评分:

{ {judgeText}}

这是页面上控件，这里主要的是使用循环来展示5个星星，根据star.src改变星星的样式

宏定义星星图片的路径(注意是路径)。

var starOffImg = "未填充的星星";

var starOnImg = "填充的星星";

在data()定义stars和judgeText

stars: [

{

src: starOffImg,

}, {

src: starOffImg,

}, {

src: starOffImg,

}, {

src: starOffImg,

}, {

src: starOffImg,

},

]

judgeText:'', // 星级评价旁的文字显示

当点击事件发生时，程序会获取用户点击的第几个星星(index)，然后传递给rating。

这里的代码要分为几个部分，首先是第一次进入本页面，此时星星应该是为0的

if(this.starNum == 0) {

this.starNum = idx;

for(var i = 0;