編輯導(dǎo)語：中繼器基本的功能是實現(xiàn)行或列的動態(tài)增加或者刪除，在很多場景下都會用到中繼器來進行處理，比如表格、布局等數(shù)據(jù)展示時，不同的場景處理方式也有所不同；本文作者分享了關(guān)于中繼器的不同場景下的樣式處理，我們一起來看一下。

“當(dāng)用中繼器來呈現(xiàn)列表數(shù)據(jù)時，如何體現(xiàn)不同的樣式？”

中繼器是用來顯示列表數(shù)據(jù)非常好的元件，因為可以根據(jù)需求設(shè)計個性化的布局樣式，特別適合于電子商務(wù)、內(nèi)容閱讀類的列表數(shù)據(jù)展示。

下面幾個例子分別是淘寶搜索結(jié)果頁、得到講堂和騰訊視頻的列表數(shù)據(jù)：

雖然這些都在列表里顯示了，但是會發(fā)現(xiàn)列表中的數(shù)據(jù)又有微小的差異；例如淘寶搜索結(jié)果頁面有顯示折后價、次日達標識的，得到課堂列表里有顯示拼團，有顯示限時的，有作者頭像右上角沒有角標的，騰訊視頻縮略圖右上角標顯示自制，有顯示VIP和付費的。

使用過中繼器元件的知道，一般樣式布局都固定的，也就是說都長的一樣模樣，只是內(nèi)容不同，如何在中繼器列表里顯示前面這種相同數(shù)據(jù)的微小樣式差異呢？

我們用一個相對簡單的例子來看一下，具體的應(yīng)用可以在掌握基本方法之后思考一下。

以微信首頁的消息列表來舉例。

消息列表里一般顯示的元素有頭像、新消息提醒角標（數(shù)字或小紅點）、消息時間和消息免打擾圖標。

看看下面這個，第一條群里有新消息，右上角有小紅點，并且該消息是免打擾的，第二條消息則沒有。

01?界面布局

添加一個中繼器元件，雙擊進入編輯狀態(tài)，用默認的矩形框作為背景，添加一個占位符表示頭像，一個紅色圓形，三個文本標簽和一個免打擾圖標，小紅點名稱new_msg，文本標簽分別為title，content和mute，字段數(shù)據(jù)布局如下。

中繼器的列表數(shù)據(jù)如下，為便于理解，字段名和元件名稱一致：

4個字段分別表示標題、內(nèi)容、新消息標志、消息免打擾標志，1表示有，0表示無。

中繼器的數(shù)據(jù)顯示主要依賴于事件處理，下面看看交互事件的設(shè)置。

02?交互處理

文字內(nèi)容比較好處理，直接使用相應(yīng)的文本標簽顯示就可以了，設(shè)置后預(yù)覽的效果如下。

這樣顯示的樣式都統(tǒng)一了，都顯示了小紅點和消息免打擾圖標，顯然這不是我們想要看到的，和實際給的中繼器數(shù)據(jù)不一樣；我們希望new_msg=1時才顯示小紅點，否則不顯示，mute值也一樣。

關(guān)鍵的地方在這里，需要設(shè)置一下事件處理的情形，通過條件表達式的方式，判斷new_msg值是否為1，如果是1，則顯示小紅點，否則隱藏小紅點，免打擾標示一樣。

• 在每項加載事件右側(cè)，點擊“啟動情形”添加一個情形；
• 在彈出的窗口中，設(shè)置“值”為new_msg=1時；
• 設(shè)置標題和內(nèi)容文本標簽內(nèi)容，同時顯示new_msg小紅點。

再添加一個ELSE情形，隱藏小紅點，中繼器實時預(yù)覽效果如下，可以看到小紅點已正常顯示或隱藏，第2、3條數(shù)據(jù)的new_msg=0，所以隱藏了。

上面到這里算是講了基本的原理。

細心的同學(xué)可能發(fā)現(xiàn)了，上面的情形只判斷了new_msg的值，還有消息免打擾的mute 呢，咋添加情形？要羅列所有可能的組合嗎？

• 有新消息，有免打擾
• 有新消息，無免打擾
• 無新消息，有免打擾
• 無新消息，無免打擾

當(dāng)然，這樣去添加不同的情形也可以，只是比較繁瑣。如果再來個群頭像角標顯示的是數(shù)字呢？場景就越來越多了。

提這樣的問題，是因為有更好的解決方式。

下個案例來說一下多個條件判斷的更優(yōu)雅的處理方式，如果你知道怎么處理，或者覺得比較好的方法，也可以分享一下。

03?小結(jié)

如果要以一句話總結(jié)，就是要在中繼器里顯示不同的樣式，通過添加不同情形的方式來判斷關(guān)鍵字段標識，顯示或隱藏相應(yīng)的元件。

通過這種方式可以實現(xiàn)不同情況下的樣式，便于開發(fā)、測試人員更直觀的理解，這也是帶有交互效果的原型的好處之一。

本文由 @Axure原型設(shè)計工場 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議