起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)手把手教您使用Axure7.0的中繼器(Repeater)
中繼器（英文名Repeater）是Axure RP 7.0推出的新功能，是目前為止Axure最復(fù)雜的功能（沒(méi)有之一），學(xué)習(xí)它的使用有助于我們快速設(shè)計(jì)一些復(fù)雜的交互界面。下面和大家分享我的使用心得。
中繼器這個(gè)翻譯是讓人費(fèi)解的，如果直譯成“重復(fù)器”雖然不太專業(yè)但是更利于理解，或者干脆不編譯，用“Repeater”就行。用過(guò)Asp.Net的人，一定對(duì)里面的Repeater很熟悉，沒(méi)錯(cuò)，Axure的Repeater與Asp.Net的原理基本上是一樣的。
先來(lái)說(shuō)說(shuō)Repeater解決什么問(wèn)題。
請(qǐng)看以下圖片。上方是一個(gè)表單，有5個(gè)表單部件和一個(gè)“添加”按鈕，界面默認(rèn)顯示下方4個(gè)圖文區(qū)域。點(diǎn)擊“添加”后出現(xiàn)第5個(gè)圖文區(qū)域。每點(diǎn)擊一次添加一個(gè)新的區(qū)域。沒(méi)有Repeater之前，要制作這樣的原型是非常困難的。
使用Repeater實(shí)現(xiàn)以上效果是比較方便的。
1、??在界面中拖入一個(gè)Repeater。中文名叫“中繼器”。
剛拖進(jìn)來(lái)是這個(gè)樣子的。
2、?? ??設(shè)置Repeater內(nèi)部部件
雙擊這個(gè)Repeater，進(jìn)入Repeater內(nèi)部界面。默認(rèn)它會(huì)有一個(gè)矩形部件，刪除它，按自己的需求拖入其他部件。如下，這個(gè)由一張圖片與“活動(dòng)名稱”、“活動(dòng)狀態(tài)”、“開(kāi)始時(shí)間”、“結(jié)束時(shí)間”4個(gè)Label部件組成的區(qū)域就是要重復(fù)顯示的內(nèi)容。
注意，這時(shí)要給每個(gè)部件命名。從便在Repeater的動(dòng)作中找到部件。方法如下：
3、??設(shè)置Repeater的數(shù)據(jù)集(Dataset)
在Repeater編輯界面下方可看到以下界面。Repeater Dataset是數(shù)據(jù)集，另外兩個(gè)一會(huì)再說(shuō)。
在Dataset中設(shè)置要顯示的數(shù)據(jù)的結(jié)構(gòu)，同時(shí)可添加默認(rèn)顯示的數(shù)據(jù)。也就是“Column”與“Row”。以下”Name”、”Status”、”Start”、”End”、”Image”為添加的Column，注意列名必須為英文。
4、??設(shè)置Repeater的動(dòng)作(Item Interactions)
a)? ? ? ??設(shè)置文本部件值——“Set Text”
在OnItemLoad（注意不是OnLoad，中文版的同學(xué)請(qǐng)自行翻譯）中雙擊Case。
雙擊后出現(xiàn)以下界面。根據(jù)業(yè)務(wù)需要設(shè)置部件值。比如我是要設(shè)置一張圖片和四個(gè)Label，于是分別選擇了Set Text與Set Image。在最右側(cè)選擇Repeater內(nèi)部的部件（注意：必須在第2步時(shí)設(shè)置部件名稱，否則無(wú)法區(qū)分部件。）。以下為Set Text的界面。選擇部件后，在下方選擇Rich Text，再點(diǎn)擊Edit Text。
點(diǎn)擊Edit Text后出現(xiàn)以下界面。
點(diǎn)擊Insert Variable of Function。
在Repeater/Dataset中選擇列的值。如item.Name,item.Status,item.Start等。然后在左側(cè)文本框會(huì)出現(xiàn)帶[[]]的值。[[]]是Axure取值的語(yǔ)法。
b)? ? ? ??設(shè)置圖片——“Set Image”
以上說(shuō)的是設(shè)置文本的方式，如果是圖片，可參見(jiàn)下圖。可直接從電腦里導(dǎo)入，也可設(shè)置成Dataset里的值，當(dāng)然也可根據(jù)Axure的語(yǔ)法設(shè)置成其他值。
5、??設(shè)置Repeater的格式
下圖是設(shè)置Repeater格式的界面?？梢栽O(shè)置Wrap（自動(dòng)換行），并設(shè)置每幾個(gè)項(xiàng)目開(kāi)始換行。背景什么的也可以設(shè)置。
運(yùn)行一下就可以看到效果了。
6、??實(shí)現(xiàn)點(diǎn)擊“添加”的效果
回到主頁(yè)面，這時(shí)變成以下效果了。Repeater根據(jù)自動(dòng)計(jì)算呈現(xiàn)出所見(jiàn)即所得的效果。接下來(lái)，我們添加幾個(gè)表單部件與一個(gè)“添加”按鈕，來(lái)實(shí)現(xiàn)“添加”功能。
為表單中的部件設(shè)置名稱，如圖。
為“添加”部件設(shè)置OnClick事件，如圖，雙擊”Case”：
在打開(kāi)的Case Editor界面中選擇Repeaters-Dataset-Add Rows，勾選右側(cè)復(fù)選框，點(diǎn)擊右下方的Add Rows按鈕。其原理是當(dāng)點(diǎn)擊“添加”按鈕時(shí)向Repeater的Dataset中添加一行。
彈出以下窗口，點(diǎn)擊Add Row，在新添的這一行中錄入表單部件值?？梢酝ㄟ^(guò)點(diǎn)擊fx按鈕添加。
點(diǎn)擊fx后進(jìn)入以下窗口。點(diǎn)擊Add Local Variable。在第一格錄入變量名稱，如LVAR_Name。如果要取文本框的值，第二格可以選text on widget。第三格選相應(yīng)的部件。
再點(diǎn)擊Insert Variable or Function，選擇剛設(shè)置的變量LVAR_Name。點(diǎn)擊OK。再將另幾個(gè)部件值也設(shè)置上即可。
這樣，就完成了點(diǎn)擊“添加”按鈕的效果了。
本文為作者李蕭泓投稿發(fā)布，轉(zhuǎn)載請(qǐng)注明出處并保留本文鏈接
?? 現(xiàn)學(xué)現(xiàn)賣
大神文章其實(shí)可以再詳細(xì)點(diǎn)！差點(diǎn)死在添加的最后兩步，研究半天才成功 ? 這里詳細(xì)說(shuō)下，說(shuō)不定對(duì)其他人可以有用。
添加部件的動(dòng)態(tài)設(shè)置中，選擇了中繼器/數(shù)據(jù)集/新增行，設(shè)置新增行時(shí)會(huì)彈出一個(gè)設(shè)置窗，
彈出窗口中，直接點(diǎn)fx位置進(jìn)入另一個(gè)窗口，
先設(shè)置局部變量，如設(shè)置名字、賦值等；局部變量設(shè)置完成后再設(shè)置全局變量，直接選定剛才設(shè)置的局部變量名 字（如LAVR_name），確定后，上一個(gè)窗口的變量名字就會(huì)變?yōu)閇[LAVR_name]]，并且設(shè)置該變量的函數(shù)。
需要注意的是:
image局部變量設(shè)置時(shí)，是賦值“選中狀態(tài)值”，后面選擇中繼器中的的圖片（我沒(méi)有導(dǎo)入圖片）；
status局部變量設(shè)置時(shí)，是“選中項(xiàng)文字”，后面選擇下拉列表（也只有一個(gè)下拉列表）
其他的是賦值“元件文字”，然后選擇對(duì)應(yīng)的單行文本框（根據(jù)命名）
最后確定第一個(gè)彈窗完成新增行設(shè)置，點(diǎn)擊確定動(dòng)態(tài)的用例；預(yù)覽中點(diǎn)擊添加按鈕，即出現(xiàn)預(yù)期效果。
page界面中的圖片部件是什么呀 如何設(shè)置呢，我這邊點(diǎn)擊添加出不來(lái)圖片
就是那個(gè)中間是藍(lán)色的image元件啊 拖到頁(yè)面后 雙擊出現(xiàn)添加/導(dǎo)入圖片的窗口（和上傳圖片一樣）
選擇圖片那里，怎樣才能實(shí)現(xiàn)（添加/導(dǎo)入）圖片的功能。按照你上面說(shuō)的做了以后，選擇圖片的文本框不能選擇圖片，另外點(diǎn)擊添加按鈕后，圖片也沒(méi)有顯示出來(lái)
流弊
為什么我在設(shè)置局部變量的時(shí)候LVAR1 ，元件文字，textname，點(diǎn)擊確認(rèn)后，到添加到中繼器行的頁(yè)面FX那里不展示數(shù)值呢。但是我在插入變量/函數(shù)的時(shí)候。設(shè)置完成可以展示數(shù)值？
求解：點(diǎn)擊添加按鈕會(huì)出現(xiàn)新的行，也有圖片，只是設(shè)置好的列間距會(huì)消失，不知怎么回事？
現(xiàn)在解決沒(méi)？我的沒(méi)有問(wèn)題啊 圖片試了幾次才弄出來(lái)，最終是最后效果
我在“提交”按鍵中設(shè)置的路徑是C:\[[LVAR_image.substring(LVAR_image.lastindexof(‘\\’)+1)]]，網(wǎng)頁(yè)預(yù)覽時(shí)，我通過(guò)網(wǎng)頁(yè)代碼看到圖片的路徑是我設(shè)置好放圖片固定的文件夾src=”C:\cloudy.png”，但預(yù)覽中是看不到圖片顯示。發(fā)布后，選擇圖片上傳，通過(guò)網(wǎng)頁(yè)代碼看到的圖片路徑卻是另一個(gè)路徑src=”C:\fakepath\cloudy.png”，如果我把圖片放在src=”C:\fakepath\cloudy.png”下，發(fā)布后選擇上傳是可以正常顯示圖片的。我就想知道，為什么發(fā)布后，選擇圖片上傳路徑會(huì)定在C:\fakepath\文件下，圖片又沒(méi)有上傳存到這個(gè)位置，導(dǎo)致無(wú)法顯示。
你好，我按照你的方式完成了路徑設(shè)置，并且也把圖片放到了相應(yīng)C盤的文件夾路徑下，發(fā)布后圖片途徑也顯示在這個(gè)文件夾內(nèi)，但還是圖片無(wú)法回顯，請(qǐng)問(wèn)你有遇到這種情況么？謝謝
??
您好，按照帖子中的方法添加文字是可以的，但是為什么最后的選擇添加圖片是不能實(shí)現(xiàn)呢？
請(qǐng)教過(guò)人后，得知要先將圖片選擇框的文本文字賦值給中繼器里的img。要將選擇圖片的位置固定下來(lái)，再設(shè)置axure。
將[[LVAR_img]]改為 E:\[[LVAR_img.substring(LVAR_img.lastindexof(‘\\’)+1)]]。
隨后要發(fā)布或者生成html才能查看，預(yù)覽是看不到效果的。
image局部變量設(shè)置時(shí)，是賦值“選中狀態(tài)值”，后面選擇中繼器中的的圖片；
status局部變量設(shè)置時(shí)，是“選中項(xiàng)文字”，后面選擇下拉列表（也只有一個(gè)下拉列表）
其他的是賦值“元件文字”，然后選擇對(duì)應(yīng)的單行文本框（根據(jù)命名）
1.數(shù)據(jù)集里面image列插入的圖片顯示不了；
2.生成后圖片不顯示，只顯示鏈接地址，為何？誰(shuí)能給解答一下？謝謝了~
導(dǎo)入圖片試試
這兩個(gè)問(wèn)題已解決，只是在“預(yù)覽”點(diǎn)擊“添加”后，新的圖片不顯示 ??
選擇好圖片后，點(diǎn)擊【添加】按。新添加成功的信息中，圖片不顯示，是為什么呢？
圖片在編輯區(qū)單元格內(nèi)右鍵直接導(dǎo)入圖片就可以了
下拉列表的內(nèi)容，添加出來(lái)是[object Object]是怎么回事，有人碰到過(guò)嗎？
按照這個(gè)教程來(lái)操作，出現(xiàn)兩個(gè)問(wèn)題：
1、交互樣式選擇錯(cuò)地方，后面發(fā)現(xiàn)是要在“中繼器項(xiàng)目交互”中設(shè)置；
2、在“中繼器項(xiàng)目交互”中設(shè)置設(shè)置文本后，發(fā)現(xiàn)沒(méi)有變量化，后面發(fā)現(xiàn)是引文文本的變量值類型要選擇richtext；
2、圖像按照叫做中來(lái)一直不成功，后從別的地方看到，在中繼器數(shù)據(jù)集中圖片那欄是要右擊“導(dǎo)入圖片”，然后交互中設(shè)置圖像就可以了。
按照帖子中的方法添加文字是可以的，但是為什么添加圖片是不能實(shí)現(xiàn)呢？
在中繼器數(shù)據(jù)集中圖片那欄是要右擊“導(dǎo)入圖片”，然后交互中設(shè)置圖像就可以了。這個(gè)只會(huì)把圖片固定了，而不是可以任意選擇圖片
謝謝
要先將圖片選擇框的文本文字賦值給中繼器里的img。要將選擇圖片的位置固定下來(lái)，再設(shè)置axure。
將[[LVAR_img]]改為 E:\[[LVAR_img.substring(LVAR_img.lastindexof(‘\\’)+1)]]。
隨后要發(fā)布或者生成html才能查看，預(yù)覽是看不到效果的。
那個(gè) 鼓搗了一上午 我大概知道上傳圖片無(wú)法顯示是什么情況了。做了無(wú)數(shù)遍的測(cè)試，終于~~~~~成功了。
童鞋們，不要F5預(yù)覽了，F(xiàn)8生成HTML文件吧，然后IE可以，火狐也顯示不出來(lái) ? ??
好鬧心，一天就鼓搗了這個(gè) ??
Repeater的數(shù)據(jù)集 第三步 這里就歇菜了 壓根沒(méi)有數(shù)據(jù)集內(nèi)容展現(xiàn)
簡(jiǎn)單明了 ，按教程做了下，成功了，就是添加圖片不知道怎么顯示出來(lái)
第5點(diǎn)，在哪里設(shè)置Repeater的格式？
第6步添加活動(dòng)圖片無(wú)法實(shí)現(xiàn) 有人做出來(lái)嗎？求指點(diǎn)
設(shè)置的圖片都長(zhǎng)一樣啊，怎么設(shè)置每個(gè)item對(duì)應(yīng)的圖片
右鍵，導(dǎo)入圖片
數(shù)據(jù)集里面的圖片地址怎么填??？圖片顯示不出來(lái)，求助~
預(yù)覽后，查看圖片屬性，復(fù)制圖片的路徑（復(fù)制image及后面的字符），回到Axure中，在增加行的編輯中，將剛才復(fù)制的內(nèi)容粘貼到圖片那一欄的輸入框內(nèi)，點(diǎn)擊確定，再預(yù)覽，搞定了
點(diǎn)f5在瀏覽器預(yù)覽，怎么查看圖片的屬性和復(fù)制路徑??？
右鍵點(diǎn)擊圖片，再點(diǎn)擊屬性啊，要不你加我QQ吧，我截圖給你看
152355340，
加了，天灰
第四步，直接用值，函數(shù)，不用Rich Text 也可以吧？另外也不用設(shè)置變量，直接取中繼器里面的數(shù)值就行了。
是的
如何添加圖片啊，添加出來(lái)的都不帶圖，求助 ?? ?? ??
我也遇到同樣的問(wèn)題，請(qǐng)問(wèn)解決了嗎？
我的也是圖片不顯示啊，你的問(wèn)題解決了么
我也遇到了同樣的問(wèn)題，請(qǐng)問(wèn)解決了嗎
圖片那個(gè)有添加成功的沒(méi)，我的是個(gè)叉子
set image 時(shí)候要再default中將value換成image,然后再導(dǎo)入一次，圖片才可以顯示出來(lái)。
選擇圖片后，獲取到的路徑應(yīng)該怎么進(jìn)行處理，一直顯示一把叉
我的也是一把叉。。。。
非常感謝分享，有點(diǎn)明白了中繼器的用途了 ??
謝謝分享，為什么按照步驟去做新增的圖片不展示呢？
照著做出來(lái)了，但不明白原理
請(qǐng)問(wèn)點(diǎn)擊按鈕的時(shí)候圖片怎么添加。。。一直做不成功0 0
不會(huì)用中繼器
非常不錯(cuò)，值得收藏，學(xué)習(xí)了
@有道云筆記收藏
太牛X。。。前幾天看了一個(gè)介紹中繼器怎么用的，不過(guò)看的頭大。。。這個(gè)簡(jiǎn)潔明了，非常不錯(cuò)
擼過(guò) mark