很多做过电商项目的朋友会经常用到评分的功能,我这里正好写了一个例子,发出来分享一下:

我写的是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.0for(var i=0;i<5;i++){if(i<pingfen){nums.push(data.zheng);}else{nums.push(data.ling);}}}else{//评分不为整数,如3.5、2.5for(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}}" style="font-size:28rpx;float:left;margin-left:30rpx;">{{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
      }});  }
});
 

如果你仅仅想先看一下例子,那么使用这个功能的页面的JS这么写(上面的WXML中的item.pingxinpic变为pingxinpic、供引用的JS不变):

var pingxin=require("../../utils/pingxing.js");
Page({data:{tuangou:tuangou,    pingxinpic:null
}
//我这里是在页面加载的时候先从后台获取数据,把数据的值赋值给tuangou,然后遍历将数据里面的参数拿出来,然后再把相应的评分中的图片排列顺序放到这条数据中的pingfenpic中保存,然后在页面中渲染即可
onLoad:function(options){console.log('onLoad');var that=this;   var pingxinpic=pingxin.pingfen(2.5);//输入你想试验的数字  

    that.setData({      pingxinpic=pingxinpic    });  
  
  }
});

若需要10分满分制的,可以根据这个例子改

完结。。。

转载于:https://www.cnblogs.com/xjwy/p/6667410.html

微信小程序评分功能(一)相关推荐

  1. 微信小程序插件功能页开发详细流程

     有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群   173683895  . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...

  2. 微信小程序php后台支付,微信小程序 支付功能实现PHP实例详解

    微信小程序 支付功能实现PHP实例详解 前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee' ...

  3. 微信 php收藏功能实现,关于微信小程序收藏功能的实现

    这篇文章主要介绍了微信小程序收藏功能的实现代码,基本功能是点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目.需要的朋友可以参考下 需求 点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目 ...

  4. python个人微信支付接口_Python实现微信小程序支付功能

    正文 由于最近自己在做小程序的支付,就在这里简单介绍一下讲一下用python做小程序支付这个流程.当然在进行开发之前还是建议读一下具体的流程,清楚支付的过程. 1.支付交互流程 2.获取openid( ...

  5. vc++6.0获取磁盘基本信息_微信小程序——常用功能2:微信小程序用户登录,申请用户授权并获取用户基本信息...

    微信小程序--常用功能2:申请用户授权并获取用户基本信息 为了更好的用户体验,很多时候我们想要获取用户的基本信息,从而实现将信息呈现到用户界面.给用户划分地域.给用户分类等功能. 但是要想获取用户信息 ...

  6. python微信小程序抢购_Python实现微信小程序支付功能!Python确实强的一批!

    正文 由于最近自己在做小程序的支付,就在这里简单介绍一下讲一下用python做小程序支付这个流程.当然在进行开发之前还是建议读一下具体的流程,清楚支付的过程. 1.支付交互流程 2.获取openid( ...

  7. 微信小程序支付功能用服务器吗,微信小程序 支付功能 服务器端(TP5.1)实现...

    首先下载微信支付SDK ,将整个目录的文件放在 /application/extend/WxPay 目录下 在使用SDK之前我们需要对 WxPay.Config.php 进行配置 namespace ...

  8. 智慧物业小程序_物业小程序物业微信小程序目前功能最全的物业小程序

    原标题:物业小程序物业微信小程序目前功能最全的物业小程序 以物业管理为核心,打造智慧社区云微信小程序管理平台,已入驻腾讯海纳社区,物业微信小程序,解决传统物业管理难,乱差的问题,利用微信小程序提供一整 ...

  9. SpringBoot对接微信小程序支付功能开发(一,下单功能)

    1,接入前准备: 接入模式选择直连模式: 申请小程序,得到APPID,并开通微信支付: 申请微信商户号,得到mchid,并绑定APPID: 配置商户API key,下载并配置商户证书,根据微信官方文档 ...

最新文章

  1. 完全隐藏Master Page Site Actions菜单只有管理员才可以看见
  2. 计算机 时代,计算机时代,你准备好了吗
  3. AI2XAML's Bug(sequel)
  4. php 函数静态变量,php 函数中静态变量使用的问题实例分析
  5. ssh项目实战----Spring计时器任务 Spring整合JavaMail(邮件发送)
  6. 当年张一鸣找我一起创业,我没去
  7. 一行SQL代码能做什么?
  8. delphi7 中文注释字体_使用nerd-font/font-patcher为字体添加字体图标
  9. 134. 加油站 golang
  10. 集合源码阅读:ArrayList
  11. LeetCode 897. 递增顺序查找树(中序遍历)
  12. Leetcode--542. 01 矩阵(java)
  13. Codeblocks 中文乱码解决方法
  14. Linux自动注销登录的帐户
  15. CI框架上传csv文件
  16. java图书管理系统源码免费_Java图书管理系统 附源码
  17. django 22、python3.4环境下新建django应用失败报错计算机中丢失python27.dll的解决方法
  18. linux阿帕奇服务器配置方案,阿帕奇服务器_服务器配置方案_linux配置apache服务器...
  19. java字符串长度(java字符串长度压缩)
  20. 力扣周赛 5197. 最小绝对差(java)

热门文章

  1. pdf提取其中一页操作方法
  2. python复利计算_python:复利计算
  3. 影像组学在医学影像中的应用
  4. 数字基建系列(一)数分如何参与埋点工作
  5. 微信公众号发送汉字乱码
  6. 电力表采集的参数有哪些
  7. VBA中的MsgBox函数使用
  8. VSCODE + 搜狗输入法,两次文字突然变成繁体?
  9. 如何批量查询快递的签收状态?
  10. BGP路由器协议排错教程:BGP 路由通告的排错