【前端】H5 + 微信小程式實現評價星級

阿新 • • 發佈：2020-07-28

評價星星的邏輯是先用五個未填充的星星顯示在介面上，然後當用戶點選到某一個星星，比如點選了第三個星星，則將前三個星星迴圈用有填充的星星替代，這樣便感覺是選中了三個星星一樣。

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