在之前的原生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
})
},
总结
其实总体来做,五星好评并不难处理。理清思路,知道满心是什么,空心是什么,做一次,以后遇见其他平台上面的这种控件也就知道怎么处理了。