微信小程序实现展示评分结果功能
本文实例为大家分享了微信小程序实现展示评分结果的具体代码,供大家参考,具体内容如下
成都创新互联公司主要从事成都网站设计、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务穆棱,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792
星星评分展示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; } .stars image,.stars2 image{ width: 26rpx; height: 26rpx; float: left; white-space:nowrap; } .stars view,.stars2 view{ width: 130rpx; position: absolute; }
js
//星星评分 var praiseNums=res.data.result.praiseNum;//获取数据评分 var praisestars=(praiseNums/5)*100+'%'; // console.log(praisestars); that.setData({ praisestars: praisestars })
星星评分
单击星星,整颗星星
wxml
一:显示后台给的评分 这里num给的是几分就显示几颗星星 二:显示用户选择的评分 {{one_2}}星
js
// 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){ var in_xin = e.currentTarget.dataset.in; var one_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 }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持创新互联。
本文题目:微信小程序实现展示评分结果功能
网站链接:http://myzitong.com/article/jogchc.html