目錄

I.場景的引入及難點分析

II.動態(tài)標(biāo)記效果實現(xiàn)思路和步驟

首先放一下效果圖：

I.場景的引入及難點分析

這個效果的場景有很多的實際意義，比如說制作一個實時的點贊、收藏或關(guān)注某個人、商品等等功能的時候，需要一個實時的前端反饋效果。

這個效果看似非常簡單，但是有兩個難點：

?第一個點在于實現(xiàn)：事先沒有定義的、需要從后端實時獲取的內(nèi)容選中。這是什么意思呢？比如說上面gif圖中的這些人物的信息，每一行都是從后端發(fā)起請求獲取后渲染到前端的，而不是我們實現(xiàn)就定義好的內(nèi)容，因此實現(xiàn)選中它們中的某一行，是需要一些特殊方法的。

?第二個點在于實現(xiàn)將已經(jīng)被用戶標(biāo)記的內(nèi)容在下一次獲取后刷新它的狀態(tài)為已標(biāo)記。這是什么意思呢？比如說上面gif圖中的這些人物對象，有一些已被該用戶添加為關(guān)心，那么當(dāng)用戶下一次進入該頁面時，這些已經(jīng)被添加關(guān)心的對象需要以“紅心”狀態(tài)顯現(xiàn)出來。這個點的難度還不算大，只需要在每一次獲取后端的內(nèi)容后對標(biāo)記對象進行狀態(tài)更新即可。

II.動態(tài)標(biāo)記效果實現(xiàn)思路和步驟

首先，整體的思路是利用動態(tài)類名對不同的元素進行選擇。下面對具體的步驟進行介紹：

1??搭建該效果的基礎(chǔ)前端組件：

<view class="content" v-for="(item,index) in upperList" :key="index">
		<view :class = "currentUpperClass">
				<view :class="currentIconClass"><image :class = "currentImgClass" :src= "item.face"  mode="widthFix"></image>
				</view>
				<view :class="currentNickClass">
					<text>{{item.name}}</text>
				</view>
				<span :class="currentFontIconColorClass[index]">
					<span @click = "addSpecialList(item.uid,index)" :class="currentFontIconClass" ></span>
				</span>
		</view>
</view>

簡單介紹一下上面的部分：“content”類的view組件是每一行元素的父容器，可以看到使用了v-for循環(huán)遍歷從后端獲取的數(shù)據(jù)并渲染。上面的部分除了動態(tài)類名外，其他的地方與普通的渲染沒有任何區(qū)別。

2??動態(tài)類名數(shù)組的妙用：

第二步就是該效果的實現(xiàn)核心：首先，動態(tài)類名這個小技巧大家一定都聽說過，用一個變量替代普通的靜態(tài)字符串類名。這里把動態(tài)類名進行了進一步的加工：使用動態(tài)類名數(shù)組。

那為什么需要用到動態(tài)類名數(shù)組？思考一個棘手的問題：如果從后端獲取了一系列的數(shù)據(jù)，并通過v-for渲染到前端，當(dāng)用戶點擊了某一行的元素，我們怎么能選中這一行呢？這項看起來很easy的功能，但分析后發(fā)現(xiàn)其實并不容易，究其原因是因為每一行的元素都是v-for直接進行渲染的，我們?nèi)绻卸ㄓ脩舻狞c擊事件，那么得到的結(jié)果就是無論用戶點擊了哪一行元素，返回的事件都是同一個，這將會造成一個現(xiàn)象：用戶點擊了心形圖標(biāo)進行“標(biāo)記”，之后所有的心形圖標(biāo)都變成了紅色的bug。

那么這里給出一種實現(xiàn)的思路：動態(tài)類名數(shù)組。什么意思呢？就是在最初渲染的時候，把類名部分用一個類名數(shù)組動態(tài)賦值，這個類名數(shù)組提前定義好它的元素，并且確保每一個元素都是不同的、且有規(guī)律可循的，例如下面這樣：

currentFontIconColorClass : ["un0","un1","un2","un3","un4","un5",
				"un6","un7","un8","un9","un10","un11","un12","un13","un14","un15",
				"un16","un17","un18","un19","un20","un21","un22","un23","un24","un25",
				"un26","un27","un28","un29","un30","un31","un32","un33","un34","un35",
				"un36","un37","un38","un39","un40","un41","un42","un43","un44","un45",
				"un46","un47","un48","un49"]
			}

?每一個元素都不同，是為了實現(xiàn)唯一選中，這也是我們的基本需求。

?有規(guī)律可循，是為了后面我們通過用戶的點擊事件，能夠通過一些邏輯判斷哪一個元素被點擊。

此時回看第一步給出的代碼塊，發(fā)現(xiàn)原來這個span標(biāo)簽被賦值了一個動態(tài)類名數(shù)組：

<span :class="currentFontIconColorClass[index]">
			<span @click = "addSpecialList(item.uid,index)" :class="currentFontIconClass" ></span>
</span>

3??實現(xiàn)點擊元素選中：

緊接上一步最后，我們已經(jīng)把span標(biāo)簽進行了動態(tài)類名數(shù)組處理。接下來，介紹怎么完整實現(xiàn)點擊選中：

首先，給父span標(biāo)簽的子標(biāo)簽span添加一個點擊事件，至于為什么有一個子span標(biāo)簽，是因為子span標(biāo)簽是實際上是用來顯示心形圖標(biāo)的標(biāo)簽。這個點擊事件的對象毫無疑問就是心形圖標(biāo)，其中傳參要特別注意把index作為參數(shù)傳入，這是我們在點擊事件函數(shù)中獲取唯一元素的必要參數(shù)。(第一個參數(shù)是原項目的特殊參數(shù)，這里不需要care它，重點關(guān)注index參數(shù))

接下來，我們對點擊函數(shù)進行處理：

addSpecialList(e,f){
			this.uid = e;
			if(this.currentFontIconColorClass[f] == "un" + f.toString()){
					uni.request({
							url:'https://xxxx',
							method:'GET',	
							data:{username : this.username, uid: this.uid},
							header: {
							  'content-type': 'application/x-www-form-urlencoded' //表明后端接收的是（表單）字符串類型，例如'id=1231454&sex=男' 
							 },
							 success: (res) => {
									if(res.data.status == "200"){
										uni.showToast({
											title: "已添加特別關(guān)心"
										})
									}
							 }
						})
						this.currentFontIconColorClass[f] = "Specilized";
						this.$forceUpdate();
					}
			else{
					uni.request({
							url:'https://xxxx',
							method:'GET',	
							data:{username: this.username,uid: this.uid},
							header: {
							  'content-type': 'application/x-www-form-urlencoded' 
							 },
							 success: (res) => {
							 	uni.showToast({
							 		title: "已取消特別關(guān)心",
							 	})
								// this.friendList = res.data
							 }
						})
						this.currentFontIconColorClass[f] = "un" + f.toString();
						this.$forceUpdate();
					}
			}

上面的代碼處理過程是這樣的：

? 首先，用戶點擊了某個元素，觸發(fā)了點擊函數(shù)，同時該元素對應(yīng)的索引index一并被傳入，這時候，我們進行一個簡單的字符串拼接，把"un"和這個索引值index拼接，并與我們最初的動態(tài)類名數(shù)組的對應(yīng)位進行比較，實現(xiàn)了我們說的對象的點擊選中。同時，它的新類名變成了一個統(tǒng)一的類名：Specilized，該類名的渲染效果就是紅色的心?

從這兒不難看出前面提到的要給動態(tài)類名數(shù)組元素設(shè)置有規(guī)律可循的值的意義所在。

? 接著，當(dāng)用戶取消某個元素的標(biāo)記時，點擊該元素，觸發(fā)了點擊函數(shù)，通過判斷，發(fā)現(xiàn)它的原類名是Specilized，那就改回"un"和這個索引值index拼接的字符串。

【重點補充】：

這里一定要注意，修改動態(tài)類名之后，一定在修改后的下一行加上這行代碼，否則你的修改無法實施反饋：

this.$forceUpdate()

4??對已經(jīng)標(biāo)記的元素在加載時的處理：

上面三個步驟把第一個難點解決了，下面用簡單的介紹解決第二個難點：

加載時，我們可以告知后端，讓他們給我們在返回時用一個返回參數(shù)來區(qū)分一個元素是否已經(jīng)被用戶標(biāo)記，例如這樣的參數(shù)：

if(this.upperList[i].has_special_concerned == "TRUE"){
				this.currentFontIconColorClass[i] = "Specilized";
				this.$forceUpdate()
							}

如果這個參數(shù)是TRUE，那么我們就知道這個元素已經(jīng)被標(biāo)記，這時候我們只需要對它的類名進行修改，統(tǒng)一改為“Specilized”即可。

接下來，重復(fù)循環(huán)上一個操作，直到對獲取的所有元素全部遍歷一遍之后，方可結(jié)束。

5??局限性：

首先聲明，實現(xiàn)這項顯示效果的方法肯定不止這一種，有很多比這個方法好的方法，同時，這個方法也存在著局限性：

? 代碼復(fù)雜性。很明顯，上面的步驟可以看出代碼會有些冗長，這是其一也。

? 需要提前定義好最大的上限。同樣很明顯，在上面的代碼中可以看出，動態(tài)類名數(shù)組的長度需要提前定義，因而建議根據(jù)實際的場景進行規(guī)劃，長度以只大不小為準(zhǔn)。