index.wxml
<view class="star-container">
<block wx:for="{{stars}}" wx:key="index">
<image class="star" src="{{item ? '/images/stars_select.png' : '/images/stars_unselect.png'}}"></image>
</block>
</view>
index.wxss
.star-container {
display: flex;
}
.star {
width: 40px; /* 根据实际情况调整 */
height: 40px; /* 根据实际情况调整 */
}
index.js
Page({
data: {
stars: [false, false, false, false, false, false], // 默认都是灰色星星
score: 50 // 假设这是你的成绩变量
},
onLoad: function(options) {
this.calculateStars();
},
calculateStars: function() {
let score = this.data.score;
let starCount = Math.round(score / (100 / 6)); // 假设满分是100分，根据实际需求调整
let stars = Array(6).fill(false).map((item, index) => index < starCount);
this.setData({ stars });
},
setScore: function(newScore) {
this.setData({ score: newScore }, () => {
this.calculateStars();
});
}
});