【前端】H5 + 微信小程序实现评价星级

评价星星的逻辑是先用五个未填充的星星显示在界面上，然后当用户点击到某一个星星，比如点击了第三个星星，则将前三个星星循环用有填充的星星替代，这样便感觉是选中了三个星星一样。

<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变为用户选择的星星数量，利用循环，将选中的星星改为填充的图片。

如果用户已经进行了选择，现在想修改星级，那有三种情况：

1. 点击了比当前星级高的星星（之前选中了4个，现在想选中5个）星星应该更改为星级高的的数量；
2. 点击了比当前星级低的星星，星星应该更改为星星低的数量（废话？）；
3. 点击了和当前一样的星级，这里的逻辑是将当前的星级减一。
   代码对星级的更改和上面解释的一样。

对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;
	    }
    },