小程序星评根据成绩来显示

index.wxml

<view class="container">
  <view>当前成绩: {{score}}</view>
  <view class="star-container">
    <block wx:for="{{5}}" wx:key="*this">
      <image src="{{index < starCount? fullStarImg : emptyStarImg }}" mode="aspectFit" class="star-icon"
      />
    </block>
  </view>
</view>

index.wxss

.container {
  padding: 20px;
  text-align: center;
}

.star-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.star-icon {
  width: 30px;
  height: 30px;
  margin: 0 5px;
}

index.js

Page({
  data: {
    score: 100, // 示例成绩，可根据实际情况修改
    starCount: 0, // 显示的星星数量
    fullStarImg: '../../../images/startFull.png', // 满星图片路径，需替换为实际图片路径
    emptyStarImg: '../../../images/start.png' // 空星图片路径，需替换为实际图片路径
  },
  onLoad() {
    // 根据成绩计算星星数量
    this.calculateStarCount();
  },
  calculateStarCount() {
    const { score } = this.data;
    // 将 0 - 100 分的成绩映射到 0 - 5 星
    let starCount = Math.round(score / 20);
    this.setData({
      starCount
    });
  }
});

代码说明

• starRating.wxml：使用 wx:for 循环渲染 5 个星星图标，根据 starCount 决定显示满星还是空星。

• starRating.wxss：对页面布局和星星图标的样式进行设置。

• starRating.js：在 onLoad 生命周期函数中调用 calculateStarCount 方法，根据成绩计算要显示的星星数量。成绩范围是 0 - 100 分，通过 Math.round(score / 20) 将其映射到 0 - 5 星。

• starRating.json：设置页面的导航栏标题。

注意事项

• 请将 fullStarImg 和 emptyStarImg 的路径替换为实际的满星和空星图片路径。

• 你可以根据实际需求修改 score 的值，以测试不同成绩下的星评显示效果。

如果是其他小程序框架（如支付宝小程序、百度小程序等），原理类似，只是语法和文件后缀名会有所不同。