⼩程序评分功能（⼀）
很多做过电商项⽬的朋友会经常⽤到评分的功能，我这⾥正好写了⼀个例⼦，发出来分享⼀下：
我写的是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"
},
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;
}
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为页⾯跳转所带来的参数
url: 'wxapp/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分满分制的，可以根据这个例⼦改
完结。。。
发布评论