中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

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

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

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

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

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

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

01?界面布局

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

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

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

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

02?交互處理

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

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

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

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

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

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

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

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

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

提這樣的問題，是因?yàn)橛懈玫慕鉀Q方式。

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

03?小結(jié)

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

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

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

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