微信小程序 星星评分展示 、半颗星星展示

数据结构如图右侧，展示效果如图左侧

 

 

这里的星星规则是   小数点后一位   ， 小于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>