小程序渐变的五星评价

小程序渐变的五星评价

• 概述

美团、饿了么很多软件都会带上评价星标，图片展示的方式可以让人非常直观的查看评店铺评价。
该组件可以输入一个数值、即可展示对应的分值。优点：小图标为css+iconfont字体，无需引用
多余的js、css样式或者图片，体积非常小;以小程序组件为例，其他语言也可参考;已经为您准备好base64的图
标，无需您自己生成。本文分为：概述、代码步骤、成品展示、git代码地址四个部分。

• 成品展示

• 代码

思路：五颗渐变的星星颜色不一样，加上灰色的，总共六种样式的五角星。先排列五颗渐变的星星，
每个小星星旁边放入一个布局为absolute的灰色小星星用来挡住有颜色的小星星。通过控制灰色
星星的宽度就可以达到我们的目的。

	<!-- 父页面 -->
	<star num="5"></star>
	<!-- 组件 -->
	<block>
	  <view class="starc">
		<view class="starc1">
		  <view class="star1 iconfont icon-shoucangjia"></view>
		  <view class="starg iconfont icon-shoucangjia" style="width: {{starWL[0]}};"></view>
		</view>
		<view class="starc1">
		  <view class="star2 iconfont icon-shoucangjia"></view>
		  <view class="starg iconfont icon-shoucangjia" style="width: {{starWL[1]}};"></view>
		</view>
		<view class="starc1">
		  <view class="star3 iconfont icon-shoucangjia"></view>
		  <view class="starg iconfont icon-shoucangjia" style="width: {{starWL[2]}};"></view>
		</view>
		<view class="starc1">
		  <view class="star4 iconfont icon-shoucangjia"></view>
		  <view class="starg iconfont icon-shoucangjia" style="width: {{starWL[3]}};"></view>
		</view>
		<view class="starc1">
		  <view class="stari iconfont icon-shoucangjia"></view>
		  <view class="starg iconfont icon-shoucangjia" style="width: {{starWL[4]}};"></view>
		</view>
	  </view>
	</block>	

	/* components/Star/Star.wxss */
	@font-face {
	  font-family: 'iconfont';
	  src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');  
	  font-weight: normal;
	  font-style: normal;
	  font-display: swap;
	}	
	
	.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -webkit-text-stroke-width: 0.2px;
	  -moz-osx-font-smoothing: grayscale;
	}
	
	.icon-shoucangjia:before {
	  content: "\e600";
	}

	.starc {
	  display: flex;
	  flex-direction: row;
	  width: 120rpx;
	  justify-content: space-between;
	}

	.starc1 {

	  position: relative;
	  transform: rotateY(180deg);
	}

	.starc .iconfont {
	  font-size: 18rpx;
	  margin-top: 7rpx;
	}

	.star1 {
	  color: #FF7531;
	}

	.star2 {
	  color: #FC552C;
	}

	.star3 {
	  color: #FE3E24;
	}

	.star4 {
	  color: #FE2D1D;
	}

	.stari {
	  font-family: "iconfont";
	  color: #FB1C1C;
	}

	.starg {
		position: absolute;
		overflow: hidden;
		color: #DCDCDC;
		top: 0;
	}

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    num: {
      type: Number,
      value: 5
    },

  },

  /**
   * 组件的初始数据
   */
  data: {
    starWL: []
  },
  lifetimes: {
    attached: function () {
      // 获取星星的值
      let n = this.data.num;
      n = n * 20;
      // 共有几个满星、余数是多少
      let all = Math.floor(n / 20);
      let rest = n - all * 20;
      console.log(n, all, rest)
      //星星宽度数组
      let starWL = []
      for (let i = 0; i < 5; i++) {
        if (all > i) {
          starWL[i] = 0
        } else {
          if (i - all != 0) {
            starWL[i] = '100%'
          } else {
            starWL[i] = (1 - rest / 20) * 100 + '%'
          }
        }
      }
      console.log(starWL)
      this.setData({
        starWL
      })
    }
  }
})

• git地址

• 小程序开发工具链接，点击可直接打开组件；