好资源导航 » 文章资讯 » 微信小程序实现展示评分结果功能

微信小程序实现展示评分结果功能

2023-08-29 00:03:04 58

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

星星评分展示1

根据评分展示整颗行星或者半颗星星

星星评分展示2

根据评分按照小数点展示整颗行星或者部分星星

wxml






















{{praiseNum}}分

wxss

.conmmentbox{
display:inline-block;
font-size:22rpx;
color:#F74754;
}
.conmmentstars{
width:26rpx;
height:26rpx;
}
.doortimes{
color:#F74754;
margin-left:10rpx;
}
.starbox{
width:130rpx;
height:30rpx;
position:relative;
display:inline-block;
overflow:hidden;
float:left;
}
.stars{
width:130rpx;
height:30rpx;
position:relative;
top:0;
left:0;
overflow:hidden;
}
.stars2{
height:30rpx;
width:130rpx;
overflow:hidden;
position:absolute;
top:0;
left:0;
overflow:hidden;
}
.starsimage,.stars2image{
width:26rpx;
height:26rpx;
float:left;
white-space:nowrap;
}
.starsview,.stars2view{
width:130rpx;
position:absolute;
}

//星星评分
varpraiseNums=res.data.result.praiseNum;//获取数据评分
varpraisestars=(praiseNums/5)*100+'%';
//console.log(praisestars);
that.setData({
praisestars:praisestars
})

星星评分

单击星星，整颗星星

wxml



一:显示后台给的评分







这里num给的是几分就显示几颗星星
二:显示用户选择的评分






{{one_2}}星

//pages/test/test.js
Page({
/**
*统一满分为5星
*/
data:{
num:4,//后端给的分数,显示相应的星星
one_1:'',
two_1:'',
one_2:0,
two_2:5
},
onLoad:function(options){
//情况一:展示后台给的评分
this.setData({
one_1:this.data.num,
two_1:5-this.data.num
})
},

//情况二:用户给评分
in_xin:function(e){
varin_xin=e.currentTarget.dataset.in;
varone_2;
if(in_xin==='use_sc2'){
one_2=Number(e.currentTarget.id);
}else{
one_2=Number(e.currentTarget.id)+this.data.one_2;
}
this.setData({
one_2:one_2,
two_2:5-one_2
})
}
})

wxss

/*pages/test/test.wxss*/
image{
height:60rpx;
width:60rpx;
display:inline-block
}

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

返回顶部
514930285
czq8825@qq.com

微信小程序实现展示评分结果功能

热门推荐

随机推荐