小程序五星好评

首选需要有两个星星，一个满分星星，一个空心的星星。 

代码实现

.wxml文件

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

• 1
• 2
• 3
• 4
• 5

这是先一个for循环构建出5个星星。

.wxss文件

.right .star {
  float: left;
  width: 54rpx;
  height: 54rpx;
  text-align: center;
  line-height: 54rpx;
  padding: 48rpx 2rpx;
}
.star image{
  width: 48rpx;
  height: 48rpx;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

这里大家可能会注意到显示星星的<image>控件比他外面的<view class="star">要小。其实这里是为了加强用户体验。很多时候我们看见的控件显示很小，但是它的实际点击区域却比较大。这里我就是这里处理，这样既保证了UI的显示效果，也保证了一定的用户体验。这里的点击事件是绑定在<view class="star">上面的。

.js文件

首先做一个包含5个星星的数组

userStars: [
 '../../images/icon-start-full.png',
  '../../images/icon-start-emty.png',
  '../../images/icon-start-emty.png',
  '../../images/icon-start-emty.png',
  '../../images/icon-start-emty.png'
],

• 1
• 2
• 3
• 4
• 5
• 6
• 7

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

// 星星点击事件
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] = '../../images/icon-start-full.png'
    }else{ // 其他是空心
      tempUserStars[i] = '../../images/icon-start-emty.png'
    }
  }
  // 重新赋值就可以显示了
  this.setData({
      userStars: tempUserStars
  })
},

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

总结

其实总体来做，五星好评并不难处理。理清思路，知道满心是什么，空心是什么，做一次，以后遇见其他平台上面的这种控件也就知道怎么处理了。

效果图