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


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 相关文章推荐
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
JS实现控制表格行文本对齐的方法
Mar 30 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
对VUE中的对象添加属性
Sep 18 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
JS面向对象编程实现的拖拽功能案例详解
Mar 03 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显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
php数组编码转换示例详解
2014/03/11 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
Jquery中对数组的操作代码
2011/08/12 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
jQuery动态地获取系统时间实现代码
2013/05/24 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
2014/03/05 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
JSON格式的键盘编码对照表
2015/01/29 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
不想让浏览器运行javascript脚本的方法
2015/11/20 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
详解React服务端渲染从入门到精通
2019/03/28 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
Python实现二维有序数组查找的方法
2016/04/27 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
python入门:这篇文章带你直接学会python
2018/09/14 Python
Python中的取模运算方法
2018/11/10 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
如何开启linux的ssh服务
2013/06/03 面试题
影视艺术学院毕业生自荐信
2013/11/13 职场文书
初中班主任寄语
2014/04/04 职场文书
小学生植树节活动总结
2014/07/04 职场文书
好的促销活动方案
2014/08/21 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
欢迎词范文
2015/01/27 职场文书
vue首次渲染全过程
2021/04/21 Vue.js