数据结构如图右侧,展示效果如图左侧
这里的星星规则是 小数点后一位 , 小于2 不变 ,大于2 小于8 是半颗星 , 大于8 进1
第一种写法
先把星星的规则方法写了
starFn:function(scroe){//分数 星星
var _this=this;
var str=scroe.toString().split('.');
var newArr=[];
// 0红星 1黑星 2半星
for(var i=0;i<str[0];i++){//红星
newArr.push(0)
}
if(str[1]==1 || str[1]==2 ){//黑星
newArr.push(1)
}else if(str[1]>2 && str[1]<8){//半星
newArr.push(2)
}else if(str[1]>=8){//大于等于8时 进1 红星
newArr.push(0)
}
if (newArr.length != 5) {//一共5个星 剩下的黑星
var num = 5 - newArr.length;
for (var i = 0; i < num; i++) {
newArr.push(1)
}
}
// console.log('组成的:',newArr)
_this.setData({
newArr:newArr
})
},
接口获取的数据处理
res.data.data.commuitytest 这个就是上图打印的数据结构
var starItemArr=[]
if(res.data.data.commuitytest){
for(var i=0;i<res.data.data.commuitytest.list.length;i++){
var scoreNum=res.data.data.commuitytest.list[i].total_score
console.log('分数:',scoreNum)
_this.starFn(scoreNum)
starItemArr.push(_this.data.newArr)
}
}
console.log("新:",starItemArr)
最后组成的心的数据打印
页面里循环展示 (我这里 wx:for="{{starItemArr[index]}}" 这样循环的 是因为我外层还有这个数据的其他循环,所以这里用了index,具体的根据自己的数据结构来展示)
<view class="star" wx:for="{{starItemArr[index]}}" wx:key="index">
<image src="{{item == 0 ? 'images/redstar.png' : item == 2 ? 'images/halfstar.png':'images/huistar.png'}}"></image>
</view>
第二种写法
还有一种方法是可以吧星星的function 写在wxs文件里 新建一个star.wxs文件
star.wxs 内容如下
var starFn = {
setStarArr:function(score){
var str = score.toString().split('.');
var arr = []
for (var i = 0; i < str[0]; i++) {
arr.push(3)
}
if (str[1] == 1 || str[1] == 2) {
arr.push(1)
} else if (str[1] > 2 && str[1] < 8) {
arr.push(2)
} else if (str[1] >= 8) {
arr.push(3)
}
if (arr.length != 5) {
var num = 5 - arr.length;
for (var i = 0; i < num; i++) {
arr.push(1)
}
}
return arr
}
}
module.exports = {
setStarArr: starFn.setStarArr
}
我的目录结构是都在pages 下
然后index.wxml文件里用法,要用的页面引用这个文件 (total_score就是评分的字段名字 starFn.setStarArr 就是wxs里定义的名字) ( 这里因为我的外级还有一层循环 <view wx:for="{{communitytest.list}}" > 所以里面直接用item.total_score了)
<view wx:for="{{starFn.setStarArr(item.total_score)}}">
<image src="{{item == 3 ? 'images/redstar.png' : item == 2 ? 'images/halfstar.png':'images/huistar.png'}}"></image>
</view>