微信小程序-星星点评+评语

首先，看一下真机显示效果图。

代码部分：
Wxml：

Wxss:
/标题/
.star-title{
margin-top: 20rpx;
margin-left: 16rpx;
}
/每行点评星星/
.star-pos {
margin-top: 10rpx;
margin-left: 30rpx;
display: flex;
flex-direction: row;
}
/单个点评星星/
.stars{
width: 40rpx;
height: 40rpx;
margin-left: 30rpx;
}
/评语/
.remark{
margin-left: 30rpx;
}

Js：
Page({
/** * 页面的初始数据 */
data: {
flag: [0, 0, 0], //默认点亮星星
startext: [’’, ‘’, ‘’], //默认点评语
stardata: [1, 2, 3, 4, 5], //星星个数
},

changeColor: function (e) {
var index = e.currentTarget.dataset.index;
var num = e.currentTarget.dataset.no;
var a = ‘flag[’ + index + ‘]’;
var b = ‘startext[’ + index + ‘]’;
var that = this;
if (num == 1){
that.setData({
[a]: 1, [b]: ‘非常不满意’
});
} else if(num == 2){
that.setData({
[a]: 2, [b]: ‘不满意’
});
} else if (num == 3){
that.setData({
[a]: 3, [b]: ‘一般’
});
} else if (num == 4){
that.setData({
[a]: 4, [b]: ‘满意’
});
} else if (num == 5){
that.setData({
[a]: 5, [b]: ‘非常满意’
});
}
},
}）

Ps：星星行数和一行星星个数可根据需求自行调整。
星星的图片：

好，本周到此结束了，下周继续见。