微信小程序-五星评分功能

2025-01-08 约 511 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=78686541

微信小程序-五星评分功能

最近要做一个在微信小程序五星评分的功能

代码如下：

js

Page({
  /**
   * 页面的初始数据
   */
  data: {
     starFlag:5
  },
  changeOne:function() {
    var that = this;
    that.setData({
      starFlag: 1
    });
  },
  changeTwo:function() {
    var that = this;
    that.setData({
      starFlag: 2
    });
  },
  changeThree:function() {
    var that = this;
    that.setData({
      starFlag: 3
    });
  },
  changeFour:function() {
    var that = this;
    that.setData({
      starFlag: 4
    });
  },
  changeFive:function() {
    var that = this;
    that.setData({
      starFlag: 5
    });
  }
})

在data下增加一个字段starFlag,根据starFlag的值来确定显示分数；

默认starFlag为5，相当于默认五星好评；

WXML
<!--走心评价-->
<view class="star" style="display:flex;flex-direction:row;">
    <view class="star-description">走心指数</view>
    <view  class="star-content" style="display:flex;flex-direction:row;">
        <view class="starsHas  {{starFlag>=1? '': 'starNo'}}"  bindtap="changeOne"></view>
        <view class="starsHas  {{starFlag>=2? '': 'starNo'}}"  bindtap="changeTwo"></view>
        <view class="starsHas  {{starFlag>=3? '': 'starNo'}}"  bindtap="changeThree"></view>
        <view class="starsHas  {{starFlag>=4? '': 'starNo'}}"  bindtap="changeFour"></view>
        <view class="starsHas  {{starFlag>=5? '': 'starNo'}}"  bindtap="changeFive"></view>
    </view>
</view>

在每个评分按钮上增加点击事件，修改对应的starFlag值。在每个按钮上class进行判断，判断星星的点亮状态。

WXSS

.star{
    margin-top: 30rpx;
}
.star-description{
    font-size: 28rpx;
    color: #333333;
    margin-left: 30rpx;
}
.star-content {
    position: absolute;
    right: 0px;
    margin-right: 40rpx;
}
.star .star-content .starNo{
    z-index: 2;
    background-image: url("https://static.imsummer.cn/anonymous_user/alice-hat.png");
    width: 83rpx;
    height: 43rpx;
    background-size: 43rpx 43rpx;
    background-position: center center;
    background-repeat: no-repeat;
}

.starsHas{
    z-index: 1;
    width: 83rpx;
    height: 43rpx;
    background-image: url("https://static.imsummer.cn/anonymous_user/alice-lizard.png");
    background-size: 43rpx 43rpx;
    background-position: center center;
    background-repeat: no-repeat;
}

这个是样式

注意background-image不要是本地的图片，我这里用的是测试的线上的图片,自行更换即可；

background-image：可以使用网络图片，或者 base64，或者使用image标签

目录

微信小程序-五星评分功能

微信小程序-五星评分功能