由于最近被调去前端组做开发，现在手上在做一个医美小程序开发，现学现用，不过觉得小程序还蛮简单的，刚做完一个个评价医生页面，用到点击五星好评，觉得有点用，就分享上来了~

          效果图：                             文件材料：        

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

.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个元素是满心，后两个是空心。 

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