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

最新推荐文章于 2026-07-04 10:56:27 发布

原创最新推荐文章于 2026-07-04 10:56:27 发布 · 1.2k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

H5-前端

本文分享了一种在小程序中实现动态五星好评组件的方法，通过点击不同的星星改变其状态，实现用户评价功能。代码简洁，思路清晰，适用于医美等小程序项目。

前言

由于最近公司前端组开发紧缺人手，公司医美项目比较赶，所以主动请求协助医美小程序开发，现学现用，不过觉得小程序还蛮简单的，在做到一个评价医生页面时，用到点击五星好评，觉得有点用，就分享上来了~

效果图：文件材料：

这个效果代码不多，更多的是一种思路，废话不多说，上代码~

.wxml

<view bindtap="starTap" data-index="{{index}}" wx:for="{{userStars}}" wx:key="index">
   <image src="{{item}}" class="stars_img"></image>
</view>

.wxss

.stars_img{height: 36rpx;width: 36rpx;padding-left: 20rpx;float: left}

.js

Page({
  //页面的初始数据
  data: {
    imgurl: app.globalData.imgurl,

    //引用外部imgage地址
    userStars: [
      app.globalData.imgurl +'/images/stars_1.png',
      app.globalData.imgurl +'/images/stars_1.png',
      app.globalData.imgurl +'/images/stars_1.png',
      app.globalData.imgurl +'/images/stars_1.png',
      app.globalData.imgurl +'/images/stars_1.png',
    ],
  },

  // 星星点击事件
  starTap: function (e) {
    var index = e.currentTarget.dataset.index; // 获取当前点击的是第几颗星星
    var tempUserStars = this.data.userStars;   // 暂存星星数组
    var len = tempUserStars.length;            // 获取星星数组的长度
    for (var i = 0; i < len; i++) {
      if (i <= index) {                        // 小于等于index的是满心
        tempUserStars[i] = app.globalData.imgurl +'/images/stars_2.png'
      } else { // 其他是空心
        tempUserStars[i] = app.globalData.imgurl +'/images/stars_1.png'
      }
    }
    // 重新赋值显示
    this.setData({
      userStars: tempUserStars
    })
  },

})

首先做一个包含5个星星的数组 , 默认是有1颗星星的，再就是处理点击事件，在处理点击事件前我们要先理清思路。比如我们点击第3颗星星时，需要显示的是3星满星，2颗空心。那么这个数组userStars就好处理了，数组的前3个元素是满心，后两个是空心。

做个记录，兴许以后用的着~

标签

#小程序 #js