小程序星评根据成绩数来展示和点击效果

微信   2025-02-08 11:23   65   0  

12238_f74h_8528.png

11058_owbo_2121.png

11059_fqdh_5653.png

index.wxml

<view class="star-container">
  <block wx:for="{{6}}" wx:key="index">
    <view class="{{index < score ? 'active' : 'star'}}" bindtap="onStarTap" data-index="{{index}}"></view>
  </block>
</view>


index.wxss

.star-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.star {
  width: 40rpx;
  height: 40rpx;
  margin: 0 10rpx;
  background-image: url('data:image/png;base64,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'); /* 灰色星星图片 */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.active {
  width: 40rpx;
  height: 40rpx;
  margin: 0 10rpx;
  background-image: url('data:image/png;base64,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'); /* 点亮的星星图片 */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}


index.js

Page({
  data: {
    score: 0, // 当前成绩,用于控制点亮的星星数量
  },

  onLoad() {
    // 假设从后端获取成绩
    this.setData({
      score: 3.5, // 示例成绩
    });
  },

  onStarTap(e) {
    console.log(this.data.score)
    const index = e.currentTarget.dataset.index;
    this.setData({
      score: index + 1, // 点击星星时更新成绩
    });
  },
});


说明

  1. WXML部分

  • 使用 wx:for 指令循环生成6个星星。

  • 使用 wx:class 动态绑定星星的类名,根据 index < score 来判断是否点亮星星。

  • 绑定 bindtap 事件,点击星星时更新成绩。

WXSS部分

  • 使用 background-image 设置星星的图片,分别定义灰色星星和点亮星星的图片路径。

JS部分

  • onLoad 方法中设置初始成绩。

  • onStarTap 方法中更新成绩,并通过 setData 方法更新页面显示。

图片资源

  • 你需要准备两张图片:

    • star-gray.png:灰色星星图片。

    • star-yellow.png:点亮的星星图片。

  • 将图片放在小程序的 images 文件夹中,并确保路径正确。

效果

  • 根据 score 的值,显示相应数量的点亮星星,其余为灰色星星。

  • 点击星星时,更新成绩并重新渲染星星状态。

你可以根据实际需求调整样式和逻辑,例如支持半星显示等。






博客评论
还没有人评论,赶紧抢个沙发~
发表评论
说明:请文明发言,共建和谐网络,您的个人信息不会被公开显示。