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


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 function、指针及内置对象
Feb 19 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
Jul 29 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
有关于JS构造函数的重载和工厂方法
Apr 07 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
js 中将多个逗号替换为一个逗号的代码
Jun 07 Javascript
浅析Bootstrap表格的使用
Jun 23 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
Vue v-text指令简单使用方法示例
Sep 19 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 04 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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 代码规范小结
2012/03/08 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
学习php开源项目的源码指南
2014/12/21 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
js弹窗返回值详解(window.open方式)
2014/01/11 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
详解vue axios二次封装
2018/07/22 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
Vue安装浏览器开发工具的步骤详解
2019/05/12 Javascript
python+splinter自动刷新抢票功能
2018/09/25 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
python判断链表是否有环的实例代码
2020/01/31 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
个人实用的自我评价范文
2013/11/23 职场文书
培训演讲稿范文
2014/01/12 职场文书
期末个人总结范文
2015/02/13 职场文书
小学重阳节活动总结
2015/03/24 职场文书
社区法制宣传月活动总结
2015/05/07 职场文书
小学中队委竞选稿
2015/11/20 职场文书
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python