首选需要有两个星星，一个满分星星，一个空心的星星。
代码实现
.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
总结
其实总体来做，五星好评并不难处理。理清思路，知道满心是什么，空心是什么，做一次，以后遇见其他平台上面的这种控件也就知道怎么处理了。
