您现在的位置是：网站首页> 编程资料编程资料
微信小程序实现五星评价_javascript技巧_
2023-05-24
410人已围观
简介 微信小程序实现五星评价_javascript技巧_
本文实例为大家分享了微信小程序实现五星评价的具体代码，供大家参考，具体内容如下
首先准备两张图片，在阿里巴巴矢量图标库中随便下两个颜色不一样的星星
效果如下
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) }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
您可能感兴趣的文章:
