微信小程序实现五星评价微信小程序实现五星评价

本文实例为大家分享了微信小程序实现五星评价的具体代码，供大家参考，具体内容如下
首先准备两张图片，在阿里巴巴矢量图标库中随便下两个颜色不一样的星星

文章图片

效果如下

文章图片

wxml
循环五次图片，添加点击事件

服务评价{{technician_content}}

默认五颗星（超赞）
js

data:{technicianAssessStar: 5, // 服务技师评价，默认五颗星technician_content:'超赞',}// 服务评价技师start_technician: function (e) {var technicianAssessStar = e.currentTarget.dataset.item + 1; var variable = e.currentTarget.dataset.name; console.log(technicianAssessStar, e)console.log(variable)if (variable === "technicianAssessStar")if (technicianAssessStar === 1) {this.setData({technician_content: '很差',})} else if (technicianAssessStar === 2) {this.setData({technician_content: '差',})} else if (technicianAssessStar === 3) {this.setData({technician_content: '一般',})} else if (technicianAssessStar === 4) {this.setData({technician_content: '赞',})} else if (technicianAssessStar === 5) {this.setData({technician_content: '超赞',})}this.setData({technicianAssessStar: technicianAssessStar,})},

打印的数据

文章图片

wxss

.flex {display: flex; }.card_start {margin-top: 32rpx; }.imagecls {height: 45rpx; width: 45rpx; padding: 0 20rpx; }.ft-size-28 {font-size: 28rpx; }.titleRight {color: rgba(0, 0, 0, 0.25)}

【微信小程序实现五星评价】以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。