微信小程序开发之五星好评

首选需要有两个星星

代码实现
html代码

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

js代码
userStars: [
‘/…/images/x2.png’,
‘/…/images/x1.png’,
‘/…/images/x1.png’,
‘/…/images/x1.png’,
‘/…/images/x1.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] = ‘/…/images/x2.png’
} else { // 其他是空心
tempUserStars[i] = ‘/…/images/x1.png’
}
}
// 重新赋值就可以显示了
this.setData({
userStars: tempUserStars
})
},