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


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对象的动态选择及遍历对象
Mar 10 Javascript
javascript 闭包详解
Jul 02 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
简述vue中的config配置
Jan 23 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
小程序分享模块超级详解(推荐)
Apr 10 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 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 strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
Zend Framework动作控制器用法示例
2016/12/09 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
JavaScript 更严格的相等 [译]
2012/09/20 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
微信小程序开发实现的IP地址查询功能示例
2019/03/28 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
element-ui 远程搜索组件el-select在项目中组件化的实现代码
2019/12/04 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
[01:15:12]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#4Newbee VS CDEC
2016/03/03 DOTA
[56:18]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第二局
2016/03/05 DOTA
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
使用python编写监听端
2018/04/12 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
护士思想汇报
2014/01/12 职场文书
小班幼儿评语大全
2014/04/30 职场文书
行政监察建议书
2014/05/19 职场文书
投标服务承诺书
2014/05/28 职场文书
五四青年节比赛演讲稿
2015/03/18 职场文书
Java异常处理try catch的基本用法
2021/12/06 Java/Android
PyCharm 配置SSH和SFTP连接远程服务器
2022/05/11 Python
ubuntu下常用apt命令介绍
2022/06/05 Servers
Redis实现短信验证码登录的示例代码
2022/06/14 Redis
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技