index.wxml
<view class="star-rating">
<block wx:for="{{stars}}" wx:key="index">
<view class="star {{index < activeStars ? 'active' : ''}}" bindtap="setRating" data-index="{{index}}">
★
</view>
</block>
</view>
index.wxss
.star-rating {
display: flex;
}
.star {
font-size: 40rpx;
color: #ccc; /* 默认灰色 */
margin-right: 10rpx;
}
.star.active {
color: #ffd700; /* 点亮后的颜色 */
}
index.js
// Page({
// data: {
// stars: [0, 1, 2, 3, 4, 5], // 6颗星星
// activeStars: 3, // 默认点亮3颗星星，可以根据成绩数动态设置
// },
// // 设置评分
// setRating: function (e) {
// const index = e.currentTarget.dataset.index;
// this.setData({
// activeStars: index + 1,
// });
// },
// });
//如果你需要根据成绩数动态设置点亮的星星数量，可以在 onLoad 或其他生命周期函数中更新 activeStars 的值：
Page({
data: {
stars: [0, 1, 2, 3, 4, 5],
activeStars: 0, // 初始化为0
},
onLoad: function (options) {
const score = 4; // 假设成绩为4
this.setData({
activeStars: score,
});
},
});