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


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 相关文章推荐
修复IE9&amp;safari 的sort方法
Oct 21 Javascript
Node.js中使用事件发射器模式实现事件绑定详解
Aug 15 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
node实现登录图片验证码的示例代码
Apr 20 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
Sep 03 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
vue实现分页的三种效果
Jun 23 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 JSON格式数据交互实例代码详解
2011/01/13 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
推荐20家国外的脚本下载网站
2011/04/28 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
js时间戳格式化成日期格式的多种方法
2013/11/11 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
2014/01/09 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
javascript 小数乘法结果错误的处理方法
2016/07/28 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
zTree异步加载展开第一级节点的实现方法
2017/09/05 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
vue自定义组件实现双向绑定
2021/01/13 Vue.js
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
详解Python是如何实现issubclass的
2019/07/24 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
python小白学习包管理器pip安装
2020/06/09 Python
python3排序的实例方法
2020/10/20 Python
Python绘制词云图之可视化神器pyecharts的方法
2021/02/23 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
大学生党员承诺书
2014/05/20 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
三好学生评语大全
2014/12/29 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python