小程序6颗灰色星星根据成绩分数来展示高亮

index.wxml

<view class="container">
  <block wx:for="{{stars}}" wx:key="index">
    <image class="star" src="{{item === 1 ? starOn : starOff}}" />
  </block>
</view>

index.wxss

.container {
  display: inline;
  align-items: center;
}

.star {
  width: 30px; /* 根据需要调整星星大小 */
  height: 30px; /* 根据需要调整星星大小 */
  margin-right: 5px; /* 星星之间的间距 */
  margin: 0;
}

index.js

Page({
  data: {
    score: 10, // 示例分数，可以根据实际情况获取
    starOn: '/images/startFull.png', // 高亮星星的图片路径
    starOff: '/images/start.png', // 灰色星星的图片路径
    stars: Array(6).fill(0) // 默认6颗灰色星星
  },

  onLoad() {
    this.updateStars();
  },

  updateStars() {
    const score = this.data.score;
    const stars = this.data.stars.map((_, index) => (index < score) ? 1 : 0);
    
    // 处理半颗星的情况，假设分数可以是小数点后一位
    if (score % 1 !== 0 && stars[Math.floor(score)] === 0) {
      stars[Math.floor(score)] = 0.5; // 半颗星，这里做标记，实际显示逻辑需要在WXML中处理
    }

    // 由于WXML中无法直接处理小数，我们需要稍微变通一下，比如通过额外的图片或样式来处理半颗星
    // 这里我们简化为整数颗星星，半颗星逻辑可以根据需要进一步实现
    // 例如，可以添加一个新的图片路径用于半颗星，或者通过CSS伪元素实现

    // 为了简化示例，我们只处理整数颗星星
    const integerStars = stars.map(star => Math.floor(star));
    this.setData({ stars: integerStars });
  },

  // 假设有一个方法可以设置分数（比如用户输入或后台数据更新）
  setScore(newScore) {
    this.setData({ score: newScore }, () => {
      this.updateStars();
    });
  }
});

注意事项

1. 图片路径：确保starOn和starOff的路径正确。

2. 半颗星处理：示例代码中简化了半颗星的处理，实际项目中可以通过添加额外的图片或CSS伪元素来实现。

3. 动态分数：如果有动态更新分数的需求，可以在相应的事件处理函数中调用setScore方法。

通过以上步骤和代码示例，你就可以在微信小程序中实现一个根据成绩分数展示高亮星星的星评功能。