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


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 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
两个DIV等高的JS的实现代码
Dec 23 Javascript
jQuery选择头像并实时显示的代码
Jun 27 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
Oct 10 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
javascript关于继承解析
May 10 Javascript
JS中使用DOM来控制HTML元素
Jul 31 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
js自定义瀑布流布局插件
May 16 Javascript
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
p5.js入门教程之键盘交互
Mar 19 Javascript
JS实现移动端在线签协议功能
Aug 22 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以mysqli方式连接类完整代码实例
2014/07/15 PHP
深入浅析php json 格式控制
2015/12/24 PHP
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
2016/05/06 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
遍历jquery对象的代码分享
2011/11/02 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
一个css与js结合的下拉菜单支持主流浏览器
2014/10/08 Javascript
easyui validatebox验证
2016/04/29 Javascript
BootStrap glyphicons 字体图标实现方法
2016/05/01 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
JS实现的JSON序列化操作简单示例
2018/07/02 Javascript
django使用channels2.x实现实时通讯
2018/11/28 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
idea创建springMVC框架和配置小文件的教程图解
2018/09/18 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
Android面试题附答案
2014/12/08 面试题
酒吧副总经理岗位职责
2013/12/10 职场文书
人事行政主管岗位职责
2013/12/22 职场文书
酒店节能降耗方案
2014/05/08 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
公司欠款证明
2015/06/24 职场文书
同事欢送会致辞
2015/07/31 职场文书
小学思想品德教学反思
2016/02/24 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python