微信小程序评分功能(一)
很多做过电商项目的朋友会经常用到评分的功能,我这里正好写了一个例子,发出来分享一下:
我写的是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
微信小程序评分功能(一)相关推荐
- 微信小程序插件功能页开发详细流程
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...
- 微信小程序php后台支付,微信小程序 支付功能实现PHP实例详解
微信小程序 支付功能实现PHP实例详解 前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee' ...
- 微信 php收藏功能实现,关于微信小程序收藏功能的实现
这篇文章主要介绍了微信小程序收藏功能的实现代码,基本功能是点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目.需要的朋友可以参考下 需求 点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目 ...
- python个人微信支付接口_Python实现微信小程序支付功能
正文 由于最近自己在做小程序的支付,就在这里简单介绍一下讲一下用python做小程序支付这个流程.当然在进行开发之前还是建议读一下具体的流程,清楚支付的过程. 1.支付交互流程 2.获取openid( ...
- vc++6.0获取磁盘基本信息_微信小程序——常用功能2:微信小程序用户登录,申请用户授权并获取用户基本信息...
微信小程序--常用功能2:申请用户授权并获取用户基本信息 为了更好的用户体验,很多时候我们想要获取用户的基本信息,从而实现将信息呈现到用户界面.给用户划分地域.给用户分类等功能. 但是要想获取用户信息 ...
- python微信小程序抢购_Python实现微信小程序支付功能!Python确实强的一批!
正文 由于最近自己在做小程序的支付,就在这里简单介绍一下讲一下用python做小程序支付这个流程.当然在进行开发之前还是建议读一下具体的流程,清楚支付的过程. 1.支付交互流程 2.获取openid( ...
- 微信小程序支付功能用服务器吗,微信小程序 支付功能 服务器端(TP5.1)实现...
首先下载微信支付SDK ,将整个目录的文件放在 /application/extend/WxPay 目录下 在使用SDK之前我们需要对 WxPay.Config.php 进行配置 namespace ...
- 智慧物业小程序_物业小程序物业微信小程序目前功能最全的物业小程序
原标题:物业小程序物业微信小程序目前功能最全的物业小程序 以物业管理为核心,打造智慧社区云微信小程序管理平台,已入驻腾讯海纳社区,物业微信小程序,解决传统物业管理难,乱差的问题,利用微信小程序提供一整 ...
- SpringBoot对接微信小程序支付功能开发(一,下单功能)
1,接入前准备: 接入模式选择直连模式: 申请小程序,得到APPID,并开通微信支付: 申请微信商户号,得到mchid,并绑定APPID: 配置商户API key,下载并配置商户证书,根据微信官方文档 ...
最新文章
- 完全隐藏Master Page Site Actions菜单只有管理员才可以看见
- 计算机 时代,计算机时代,你准备好了吗
- AI2XAML's Bug(sequel)
- php 函数静态变量,php 函数中静态变量使用的问题实例分析
- ssh项目实战----Spring计时器任务 Spring整合JavaMail(邮件发送)
- 当年张一鸣找我一起创业,我没去
- 一行SQL代码能做什么?
- delphi7 中文注释字体_使用nerd-font/font-patcher为字体添加字体图标
- 134. 加油站 golang
- 集合源码阅读:ArrayList
- LeetCode 897. 递增顺序查找树(中序遍历)
- Leetcode--542. 01 矩阵(java)
- Codeblocks 中文乱码解决方法
- Linux自动注销登录的帐户
- CI框架上传csv文件
- java图书管理系统源码免费_Java图书管理系统 附源码
- django 22、python3.4环境下新建django应用失败报错计算机中丢失python27.dll的解决方法
- linux阿帕奇服务器配置方案,阿帕奇服务器_服务器配置方案_linux配置apache服务器...
- java字符串长度(java字符串长度压缩)
- 力扣周赛 5197. 最小绝对差(java)