微信小程序五星评分效果实现代码


Posted in Javascript onApril 06, 2017

微信小程序五星评分效果实现代码

很多做过电商项目的朋友会经常用到评分的功能,我这里正好写了一个例子,发出来分享一下:

我写的是5分满分制的,首先,准备3个图片,

微信小程序五星评分效果实现代码

,像这样的,分别代表分数为0,0.5,1 时的状态,

效果图:(以3.5为例)

微信小程序五星评分效果实现代码

然后上代码:

js:

function pingfenxing(pingfen){
   var that=this,//这里是图片的路径,自己需要改
     data={
     ling:"img/pingfen0.png",
     zheng:"img/pingfen2.png",
     ban:"img/pingfen1.png"

},
     nums=[];//这里是返回图片排列的顺序的数组,这里要注意在页面使用的时候图片的路径,不过使用网络图片无所谓

if((pingfen/0.5)%2==0){//如果评分为整数,如4.0、5.0
     for(var i=0;i<5;i++){
      if(i<pingfen){
       nums.push(data.zheng);
      }else{
       nums.push(data.ling);
      }
     }
   }else{//评分不为整数,如3.5、2.5
     for(var i=0;i<5;i++){
      if(i<pingfen-0.5){
       nums.push(data.zheng);//先把整数分离出来,如:3.5,这里就是先把3分离出来,把代表1的图片放进去
      }else if(i==(pingfen-0.5)){
       nums.push(data.ban);//把小数的部分分离出来,如:3.5里的0.5,把代表0.5的图片放进去
      }else{
       nums.push(data.ling);//然后剩下的就是没有满的用代表0的图片放进去,如:3.5,里面放进去了3个代表1的图片,然后放入了1个代表0.5的图片,最后还剩一个图片的位置,这时候就放代表0的图片
      }
     }
   }
    return num; } module.exports = {
 pingfen:pingfenxing }

WXML代码:

<view class="pingfen">
   <block wx:for="{{item.pingfenpic}}" wx:key="{{item.id}}" wx:for-item="pingfen">
      <image class="img" src="{{pingfen}}"></image>
   </block>
   <text data-pingfen="{{item.pingfen}}" >{{item.pingfen}}</text>
</view>

使用这个功能的页面的JS代码:

var pingxin=require("../../utils/pingxing.js");
Page({data:{

tuangou:tuangou}//我这里是在页面加载的时候先从后台获取数据,把数据的值赋值给tuangou,然后遍历将数据里面的参数拿出来,然后再把相应的评分中的图片排列顺序放到这条数据中的pingfenpic中保存,然后在页面中渲染即可
onLoad:function(options){
  console.log('onLoad');
  var that=this;
  // 页面初始化 options为页面跳转所带来的参数
  wx.request({
   url: 'https://wxapp.com/tuangou',//这里是你请求数据的接口地址,自己填写
   data: {},
   method: 'GET',
   success: function(res){
    // success
    console.log(res.data.tuangou);
    let tuangou=res.data.tuangou;
    for(let i=0;i<tuangou.length;i++){
      tuangou[i].pingfenpic=pingxin.pingfen(parseFloat(tuangou[i].pingfen));//使用函数将评分变为图片排列的数组,这里要注意,如果评分传过来的是字符串 需要将它变为数字
    }
    that.setData({
     tuangou:tuangou
    });
    console.log(that.data.tuangou);
   },
   fail: function() {
    // fail
   },
   complete: function() {
    // complete
   }
  });
}
});

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
Sep 06 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
Apr 21 Javascript
vue中的inject学习教程
Apr 24 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
May 09 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
vue 中url 链接左边的小图标更改问题
Dec 30 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 #Javascript
jQuery实现文章图片弹出放大效果
Apr 06 #jQuery
vue.js指令和组件详细介绍及实例
Apr 06 #Javascript
javascript闭包功能与用法实例分析
Apr 06 #Javascript
深入理解 JavaScript 中的 JSON
Apr 06 #Javascript
ES6中module模块化开发实例浅析
Apr 06 #Javascript
ES6中class类用法实例浅析
Apr 06 #Javascript
You might like
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
php实现递归与无限分类的方法
2015/02/16 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
用JTrackBar实现的模拟苹果风格的滚动条
2007/08/06 Javascript
javascript concat数组累加 示例
2009/09/03 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
2013/03/21 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
iScroll中事件点击触发两次解决方案
2015/03/11 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
几种tab切换详解
2017/02/03 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
2018/01/16 Javascript
Vue程序调试的方法
2019/06/17 Javascript
jQuery操作动画完整实例分析
2020/01/10 jQuery
微信小程序 wx.getUserInfo引导用户授权问题实例分析
2020/03/09 Javascript
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
Java及python正则表达式详解
2017/12/27 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
Python更新所有已安装包的操作
2020/02/13 Python
python获取linux系统信息的三种方法
2020/10/14 Python
远东集团网络工程师面试题
2014/10/20 面试题
志愿者活动总结
2014/04/28 职场文书
化工见习报告范文
2014/10/31 职场文书
会议通知范文
2015/04/15 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android