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


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 相关文章推荐
JavaScript 页面编码与浏览器类型判断代码
Jun 03 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
js DOM的学习笔记
Dec 22 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
Jun 30 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
jquery+css实现动感的图片切换效果
Nov 25 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
Apr 24 Javascript
Vue 中mixin 的用法详解
Apr 23 Javascript
node 解析图片二维码的内容代码实例
Sep 11 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
dhtmlxTree目录树增加右键菜单以及拖拽排序的实现方法
2013/04/26 PHP
基于php导出到Excel或CSV的详解(附utf8、gbk 编码转换)
2013/06/25 PHP
php中filter_input函数用法分析
2014/11/15 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
PHP入门教程之会话控制技巧(cookie与session)
2016/09/11 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
Javascript打印网页部分内容的脚本
2008/11/17 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
JS弹出新窗口被拦截的解决方法
2016/08/09 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
Vue中的异步组件函数实现代码
2018/07/20 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
Vue获取微博授权URL代码实例
2020/11/04 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
Django中URLconf和include()的协同工作方法
2015/07/20 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
西雅图的买手店:Totokaelo
2019/10/19 全球购物
目标责任书范本
2014/04/16 职场文书
物业管理专业自荐信
2014/07/01 职场文书
员工离职感谢信
2015/01/22 职场文书
运动会入场词
2015/07/18 职场文书
新入职员工工作总结
2015/10/15 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书