微信小程序开发-五星评价

最新推荐文章于 2022-08-22 15:42:05 发布

原创最新推荐文章于 2022-08-22 15:42:05 发布 · 680 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #js

微信小程序专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种在小程序中实现动态五星评价组件的方法，通过三元选择判断改变星星图标状态，实现了用户点击选择星级的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在做自己的小程序的时候做到一个对店铺的评价，文字什么的都很easy，遇到一个有趣的五星评价。先想到一个直接选择12345星的五星评价，以后有3星半的评价的效果再继续补充。

开始撸代码。。。。。

首先上个wxml代码：

<view class="comment1-description" style="display:flex;flex-direction:row;">
   <view class="comment1-description1">描述相符</view>
   <view  class="star-pos" style="display:flex;flex-direction:row;">
        <image class='stars' src='{{flag >= 1 ? img.selected:img.normal}}' bindtap="changeColor1"></image>
        <image class='stars' src='{{flag >= 2 ? img.selected:img.normal}}' bindtap="changeColor2"></image>
        <image class='stars' src='{{flag >= 3 ? img.selected:img.normal}}' bindtap="changeColor3"></image>
        <image class='stars' src='{{flag >= 4 ? img.selected:img.normal}}' bindtap="changeColor4"></image>
        <image class='stars' src='{{flag >= 5 ? img.selected:img.normal}}' bindtap="changeColor5"></image>
    </view>
    </view>

一看就很明显的知道用了三元选择和绑定事件。

wxss：

/*星星的样式*/
.comment1-description{
  margin-top: 50px;
}
.stars{
    width: 43rpx;
    height: 43rpx;
    margin-left: 40rpx;
}

js：

Page({
  data: {
    flag: 0,
    img:{
      "normal":"/images/icons/star.png",
      "half": "/images/icons/star1.png",
      "selected": "/images/icons/star2.png"
    }
  },
  changeColor1: function () {
    var that = this;
    that.setData({
      flag: 1
    });
    console.log("选择 "+that.data.flag +" 星");
  },
  changeColor2: function () {
    var that = this;
    that.setData({
      flag:2
    });
    console.log("选择 " + that.data.flag + " 星");
  },
  changeColor3: function () {
    var that = this;
    that.setData({
      flag: 3
    });
    console.log("选择 " + that.data.flag + " 星");
  },
  changeColor4: function () {
    var that = this;
    that.setData({
      flag: 4
    });
    console.log("选择 " + that.data.flag + " 星");
  },
  changeColor5: function () {
    var that = this;
    that.setData({
      flag: 5
    });
    console.log("选择 " + that.data.flag + " 星");
  }
})

基本原理就是用了三元选择判断。

后来想了想，这样写的话会在其他评价比如有好几个五星评价的话很麻烦，后期优化ing

附上用的png图：