评价星星的逻辑是先用五个未填充的星星显示在界面上，然后当用户点击到某一个星星，比如点击了第三个星星，则将前三个星星循环用有填充的星星替代，这样便感觉是选中了三个星星一样。
<view class='score'>
<view class='score-left'>
<view class="score-text">
<text >评分:</text>
<block v-for="(star,index) in stars">
<img class="star-image" v-bind:src="star.src" v-on:click="rating(index)" alt="星星图片" />
</block>
<label style="color: #ff0000;">{{judgeText}}</label>
</view>
</view>
</view>
这是页面上控件，这里主要的是使用循环来展示5个星星，根据star.src改变星星的样式
宏定义星星图片的路径（注意是路径）。
var starOffImg = "未填充的星星";
var starOnImg = "填充的星星";
在data()定义stars和judgeText
stars: [
{
src: starOffImg,
}, {
src: starOffImg,
}, {
src: starOffImg,
}, {
src: starOffImg,
}, {
src: starOffImg,
},
]
judgeText:'', // 星级评价旁的文字显示
当点击事件发生时，程序会获取用户点击的第几个星星(index)，然后传递给rating。
这里的代码要分为几个部分，首先是第一次进入本页面，此时星星应该是为0的
if(this.starNum == 0) {
this.starNum = idx;
for(var i = 0; i < idx; i++) {
this.stars[i].src = starOnImg;
}
}
当用户进行选择后，idx变为用户选择的星星数量，利用循环，将选中的星星改为填充的图片。
如果用户已经进行了选择，现在想修改星级，那有三种情况：
- 点击了比当前星级高的星星（之前选中了4个，现在想选中5个）星星应该更改为星级高的的数量；
- 点击了比当前星级低的星星，星星应该更改为星星低的数量（废话？）；
- 点击了和当前一样的星级，这里的逻辑是将当前的星级减一。
代码对星级的更改和上面解释的一样。
对judgeText进行赋值操作：
if(index < 2){
this.judgeText = '很差'
}else if(index == 2){
this.judgeText = '一般'
}else if(index > 2 && index < 4){
this.judgeText = '不错'
}else if(index == 4){
this.judgeText = '非常好'
}
最后贴上rating的完整代码
点击星星的事件：
//点击星星
rating: function(index) {
var total = this.stars.length; //星星总数
var idx = index + 1; //这代表选的第idx颗星-也代表应该显示的星星数量
let _this = this
if(index < 2){
this.judgeText = '很差'
_this.evaluate = 2
}else if(index == 2){
this.judgeText = '一般'
_this.evaluate = 1
}else if(index > 2 && index < 4){
this.judgeText = '不错'
_this.evaluate = 0
}else if(index == 4){
this.judgeText = '非常好'
_this.evaluate = 0
}
//进入if说明页面为初始状态
if(this.starNum == 0) {
this.starNum = idx;
for(var i = 0; i < idx; i++) {
this.stars[i].src = starOnImg;
}
} else {
//如果再次点击当前选中的星级-仅取消掉当前星级，保留之前的。
if(idx == this.starNum) {
for(var i = index; i < total; i++) {
this.stars[i].src = starOffImg;
}
if(index == 0){
_this.judgeText = ''
}else if(index == 2 || index == 1){
_this.judgeText = '很差'
_this.evaluate = 2
}else if(index == 3){
_this.judgeText = '一般'
_this.evaluate = 1
}else if(index == 4){
_this.judgeText = '不错'
_this.evaluate = 0
}else if(index == 5){
_this.judgeText = '非常好'
_this.evaluate = 0
}
}
//如果小于当前最高星级，则直接保留当前星级
if(idx < this.starNum) {
for(var i = idx; i < this.starNum; i++) {
this.stars[i].src = starOffImg;
}
}
//如果大于当前星级，则直接选到该星级
if(idx > this.starNum) {
for(var i = 0; i < idx; i++) {
this.stars[i].src = starOnImg;
}
}
var count = 0; //计数器-统计当前有几颗星
for(var i = 0; i < total; i++) {
if(this.stars[i].active) {
count++;
}
}
this.starNum = count;
}
},
