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


Posted in Javascript onFebruary 15, 2019

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

星星评分展示1

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

星星评分展示2

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

wxml

<view class="conmmentbox">
 <view class="starbox">
 <view class="stars2" style="width: 130rpx"> 
  <view>
  <image src="../../image/token_img/lp_ct2.png"></image>
  <image src="../../image/token_img/lp_ct2.png"></image>
  <image src="../../image/token_img/lp_ct2.png"></image>
  <image src="../../image/token_img/lp_ct2.png"></image>
  <image src="../../image/token_img/lp_ct2.png"></image>
  </view>
 </view>
 <view class="stars" style="width: {{praisestars}};">
  <view>
  <image src="../../image/token_img/lp_dj1.png"></image>
  <image src="../../image/token_img/lp_dj1.png"></image>
  <image src="../../image/token_img/lp_dj1.png"></image>
  <image src="../../image/token_img/lp_dj1.png"></image>
  <image src="../../image/token_img/lp_dj1.png"></image>
  </view>
 </view> 
 </view>    
  {{ praiseNum }}分
</view>

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

<!--pages/test/test.wxml--> 
<view> 
  <view>一:显示后台给的评分</view> 
  <block wx:for="{{one_1}}"> 
    <image src='../../images/use_sc2.png'></image> 
  </block> 
  <block wx:for="{{two_1}}"> 
    <image src='../../images/use_sc.png'></image> 
  </block> 
</view> 
<view>这里num给的是几分就显示几颗星星</view> 
<view style='margin-top:60px;'>二:显示用户选择的评分</view> 
<block wx:for="{{one_2}}" wx:key="index"> 
  <image catchtap='in_xin' id='{{index+1}}' data-in='use_sc2' src='../../images/use_sc2.png'></image> 
</block> 
<block wx:for="{{two_2}}" wx:key="index"> 
  <image catchtap='in_xin' id='{{index+1}}' data-in='use_sc' src='../../images/use_sc.png'></image> 
</block> 
<view>{{one_2}}星</view>

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 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
提取字符串中年月日的函数代码
Nov 05 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
angularjs基础教程
Dec 25 Javascript
JavaScript中的值类型转换介绍
Dec 31 Javascript
JS实现简单的图书馆享元模式实例
Jun 30 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 #Javascript
微信小程序实现商品属性联动选择
Feb 15 #Javascript
微信小程序实现购物页面左右联动
Feb 15 #Javascript
微信小程序基于picker实现级联菜单
Feb 15 #Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 #Javascript
详解react-refetch的使用小例子
Feb 15 #Javascript
小程序实现多列选择器
Feb 15 #Javascript
You might like
PHP中动态显示签名和ip原理
2007/03/28 PHP
Notice: Undefined index: page in E:\PHP\test.php on line 14
2010/11/02 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
Javascript中的var_dump函数实现代码
2009/09/07 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
angular使用bootstrap方法手动启动的实例代码
2017/07/18 Javascript
浅谈angular.js跨域post解决方案
2017/08/30 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
React全家桶环境搭建过程详解
2018/05/18 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
Python中的多重装饰器
2015/04/11 Python
python使用Tesseract库识别验证
2018/03/21 Python
python实现Zabbix-API监控
2018/09/17 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
Crocs欧洲官网:Crocs Europe
2020/01/14 全球购物
2014年学生会主席工作总结
2014/11/07 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书