meituan项目里的渲染星级的方法，json里是一个浮点数

最新推荐文章于 2022-02-09 11:07:01 发布

锋芒神话霜

最新推荐文章于 2022-02-09 11:07:01 发布

阅读量158

点赞数

分类专栏： cyh的前端学习之路

本文链接：https://blog.csdn.net/qq_34471916/article/details/103658007

版权

cyh的前端学习之路专栏收录该内容

40 篇文章 0 订阅

订阅专栏

我们在模块js里写好逻辑之后通过window方法发射出来，在上级js里通过new的形式让系统自己去找到发射出来的方法，下面的this.score和 _getStars方法里的this.score是一样的，下面的方法同理，这个this.score的score来自被调用的时候所用的参数，也就是json里的wm_poi_score

  var itemTmpl = `<div class="star-score">$starstr</div>`;

  function _getStars(){
  //这里传进来的就是下面的wm_poi_score，下面有this.score = 参数的score，因此这里下面一行的this.score就是传进来的哪个参数
    var _score = this.score.toString();
    //传进来的一个例子是4.3
    var scoreArray = _score.split('.');
    var fullstar = parseInt(scoreArray[0]);
    var halfstar = parseInt(scoreArray[1]) >=5 ? 1 : 0;
    var nullstar = 5 - fullstar - halfstar;
    var starstr = '';
    for(let i = 0; i < fullstar; i++){
      starstr += '<div class="star fullstar"></div>'
    }
    for(let i = 0; i < halfstar; i++){
      starstr += '<div class="star halfstar"></div>'
    }
    for(let i = 0; i < nullstar; i++){
      starstr += '<div class="star nullstar"></div>'
    }
    return itemTmpl.replace('$starstr', starstr);
  }
  window.StarScore = function(score){
    this.score = score || '';
    this.getStars = _getStars;
  }

.replace('$wm_poi_score', new StarScore(item.wm_poi_score).getStars());

最后css里每种不同的星有不同的背景

.star-score .star {
  width: 0.2666666667rem;
  height: 0.2666666667rem;
  float: left;
  background-size: cover;
}
.star-score .fullstar {
  background-image: url("./img/fullstar.png");
}
.star-score .halfstar {
  background-image: url("./img/halfstar.png");
}
.star-score .nullstar {
  background-image: url("./img/gray-star.png");
}