下面是實(shí)現(xiàn)的效果圖，你看到的圖標(biāo)，均已經(jīng)實(shí)現(xiàn)了它該有的功能，搜索、分類、頂部欄分類滑動(dòng)等等，鑒于文章篇幅不宜過(guò)長(zhǎng)的原則，這一次只講解列表到詳情頁(yè)的數(shù)據(jù)傳遞（只是講解了關(guān)鍵設(shè)置點(diǎn)）。

PS:哈哈甚至于我把它轉(zhuǎn)化為IOS的桌面文件時(shí)，我的同事還以為是一個(gè)真實(shí)的手機(jī)應(yīng)用（仰天狂笑?。。。?/p>

列表頁(yè)

詳情頁(yè)

兩個(gè)頁(yè)面中的內(nèi)容均是一一對(duì)應(yīng)的關(guān)系。

在整個(gè)實(shí)現(xiàn)過(guò)程中有幾點(diǎn)需要特別注意：

1. 中繼器只有在同一個(gè)頁(yè)面中才能共享到數(shù)據(jù)；
2. 在多個(gè)中繼器中傳輸數(shù)據(jù)時(shí)，必須在數(shù)據(jù)源的中繼器中把數(shù)據(jù)傳輸出來(lái)，在接受的中繼器中是不能主動(dòng)去獲取源中繼器中的數(shù)據(jù)；
3. 通過(guò)使用indexof函數(shù)可以實(shí)現(xiàn)數(shù)據(jù)篩選，在結(jié)合相關(guān)事件出發(fā)賦值行為，可以實(shí)現(xiàn)多種形勢(shì)的篩選
4. 在中繼器中并不是所有的數(shù)據(jù)都需要現(xiàn)實(shí)，有些字段可以作為隱性數(shù)據(jù)，用于實(shí)現(xiàn)特殊功能存在
5. 過(guò)濾器使用時(shí)一定要注意清楚時(shí)間，axure中自帶有清楚單個(gè)規(guī)則的過(guò)濾或是清除中繼器中所有過(guò)濾規(guī)則
6. 通過(guò)中繼器分頁(yè)功能能夠很好的制作列表到詳情的這種跳轉(zhuǎn)關(guān)系
7. 中繼器中各種值的傳遞，以及通過(guò)一些自帶的函數(shù)間接傳值都是很常用的方法，通過(guò)主動(dòng)設(shè)置變量可以把部件中的值傳遞到中繼器中或進(jìn)行一些特殊的處理

先給看下我中繼器中的數(shù)據(jù)是如何設(shè)置的，注意數(shù)據(jù)屬性的字段，整個(gè)項(xiàng)目中會(huì)用到兩個(gè)中繼器，簡(jiǎn)便起見(jiàn)直接保持兩個(gè)中繼器的字段一致，只是有些無(wú)用的字段具體使用時(shí)不使用即可。

這就是我中繼器中所有的數(shù)據(jù)，通過(guò)這些數(shù)據(jù)我顯示了列表頁(yè)與詳情頁(yè)一一對(duì)應(yīng)關(guān)系的跳轉(zhuǎn)邏輯，下面是中繼器中基本項(xiàng)的設(shè)置，此處需要注意上面的數(shù)據(jù)項(xiàng)比基本項(xiàng)中的數(shù)量要多，那么多出的數(shù)據(jù)有什么用呢？在實(shí)際中，列表中的信息往往都是比較少的，而詳情頁(yè)de內(nèi)容是是否豐富的，在上面設(shè)置的很多的屬性均是只在詳情頁(yè)才會(huì)使用到。而如何把數(shù)據(jù)傳遞到詳情頁(yè)呢？這是一個(gè)問(wèn)題，容我一一道來(lái)：

下圖是第一個(gè)中繼器中的基本項(xiàng)設(shè)置。

中用例中我們可能之前已經(jīng)看到有中繼器這個(gè)選項(xiàng)，其下也有Datasets這個(gè)選項(xiàng)，以前不知道有什么用。這幾個(gè)操作是在本次項(xiàng)目中使用最平凡的功能。下面整體講解下數(shù)據(jù)傳遞的邏輯：在源中繼器中把數(shù)據(jù)都錄入以后，通過(guò)”add rows”功能。

數(shù)傳遞的過(guò)程圖，注意箭頭方向，以及圖中的說(shuō)明文字

接著上一張圖，與上一張圖在一個(gè)連續(xù)的流程中，

選擇完成后一步一步確認(rèn)即可，

下圖是對(duì)數(shù)據(jù)進(jìn)行標(biāo)記，方便后面進(jìn)行數(shù)據(jù)更新。

標(biāo)記數(shù)據(jù)

更新數(shù)據(jù)，傳遞到第二個(gè)中繼器中。

確認(rèn)即可，數(shù)據(jù)傳遞已經(jīng)完成，哎還是有點(diǎn)復(fù)雜啊 ：）

下面這個(gè)是在第二個(gè)中繼器中設(shè)置的，建立一個(gè)列表與詳情頁(yè)一一對(duì)應(yīng)的關(guān)系。

好了整個(gè)項(xiàng)目中最關(guān)鍵的點(diǎn)已經(jīng)說(shuō)完了，圖有點(diǎn)多，有點(diǎn)復(fù)雜，不過(guò)仔細(xì)看一定可以顯示兩個(gè)中繼器之間的數(shù)據(jù)傳遞，列表與詳情頁(yè)一一對(duì)應(yīng)的關(guān)系也是沒(méi)有問(wèn)題的，有了這個(gè)通用控件我們就可以實(shí)現(xiàn)海量數(shù)據(jù)的列表和詳情頁(yè)的原型啦??！

若是有任何因?yàn)橹v解不到位的地方，而產(chǎn)生的疑問(wèn)都可以留言或是私信我，一定會(huì)給答復(fù)的。

最后附上附件，希望對(duì)同學(xué)們有所幫助。

作者本人提供：