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


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 相关文章推荐
jQuery的一些注意
Dec 06 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
一些实用性较高的js方法
Apr 19 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
nvm、nrm、npm 安装和使用详解(小结)
Jan 17 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
在vue中对数组值变化的监听与重新响应渲染操作
Jul 17 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
Oct 30 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 字符串编码截取函数(兼容utf-8和gb2312)
2009/05/02 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
Yii框架自定义数据库操作组件示例
2019/11/11 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
jQuery代码实现发展历程时间轴特效
2015/07/30 Javascript
jQuery Dialog对话框事件用法实例分析
2016/05/10 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
微信小程序 setData的使用方法详解
2017/04/20 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
JS实现图片切换特效
2019/12/23 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
Python实现抓取页面上链接的简单爬虫分享
2015/01/21 Python
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
python用什么编辑器进行项目开发
2020/06/17 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
《千年梦圆在今朝》教学反思
2014/02/24 职场文书
航空学院求职信
2014/06/11 职场文书
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js