微信小程序 星星評分展示 、半顆星星展示

數據結構如圖右側，展示效果如圖左側

 

 

這裏的星星規則是   小數點後一位   ， 小於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>