小程序实现星级评价样式

一、wxml 通过循环画星星容器

<view class="score">
     <text
        wx:for="{{ [0, 1, 2, 3, 4] }}"
        wx:key="{{index}}"
        class="{{ shop.score >= (index + 1) ? 'bg_color' : '' }} v v-star mr15"
     ></text>
     <text class="shop-number size24 color38">{{ shop.score }}</text>
  </view>

---

二、js中获取数据

data: {
    shop: [{score:5.0}]  // 后端获取评分数据
  }

---

三、wxss 样式

.bg_color{
    background: -webkit-linear-gradient(left, #FBA649 0%, #F56D23 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

其中，v v-start 表示字体库图标

mr25 表示  margin-right:25 rpx; 

---

四、效果图