微信小程序开发(十一)五星好评

在之前的原生iOS开发中写了一个《【iOS】星星评分控件HGDQStars》，这个在原生开发里面可以给出0~5之间的任意一个分数，使用起来也很方便。
最近在做小程序开发，也需要一个五星好评的控件，这次写的只能给1，2，3，4，5这几个固定的分数，但是对于这种对分数要求不是很严格的场景，其实这样就可以了。
下面是具体实现过程。

准备工作

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

代码实现

.wxml文件

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

这是先一个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;
}

这里大家可能会注意到显示星星的<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颗星星的。
再就是处理点击事件，在处理点击事件前我们要先理清思路。比如我们点击第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})
},

总结

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

效果图