本文主要分享內(nèi)容為如何使用中繼器（Repeater）的列表增加與刪除，適用于剛?cè)腴T(mén)的小白產(chǎn)品。

中繼器(Repeater)是Axure RP8中的一款高級(jí)組件，主要在以列表形式（如商品列表、聯(lián)系人列表等）展示信息并對(duì)列表進(jìn)行增刪改查，分頁(yè)、排序等操作的場(chǎng)景中，中繼器是你的不二選擇。本文用一個(gè)簡(jiǎn)單的例子來(lái)演示中繼器的列表增加與刪除功能。

完成后效果如下圖，該例子主要實(shí)現(xiàn)列表的增加與刪除操作。

1.列表的增加

2.列表的刪除

為了達(dá)到更好的學(xué)習(xí)效果，建議您按照教程邊學(xué)邊做，以下是Axure RP 8 的實(shí)際操作流程

一.什么是中繼器

中繼器是一個(gè)數(shù)集的容器，中繼器一共有11個(gè)動(dòng)作，其中包括6個(gè)中繼器動(dòng)作和5個(gè)數(shù)據(jù)集動(dòng)作。在原型制作中它可以導(dǎo)入圖片和數(shù)據(jù)。在交互上它可以實(shí)現(xiàn)新增行、刪除行、標(biāo)記行、排序，篩選等，配合函數(shù)使用，中繼器可以實(shí)現(xiàn)的高級(jí)交互效果更多。

二.中繼器新增行

1. 我們先從元件庫(kù)里拉一個(gè)中繼器到操作區(qū)。

1. 可以看到操作區(qū)列表顯示1 2 3,與右下角的中繼器列表對(duì)應(yīng)。
2. 操作區(qū)中繼器母版右上角的藍(lán)色小標(biāo)簽與右邊檢查器中的Case1對(duì)應(yīng)。

2.點(diǎn)擊操作臺(tái)上的中繼器版，跳轉(zhuǎn)到中繼器界面。

3.選中面板復(fù)制粘貼一個(gè)新的矩形，并且給兩個(gè)矩命名。

4. 回到Home版，發(fā)現(xiàn)操作區(qū)列表已經(jīng)改變。

?5.在右下角增加新增列。

?6.添加成功

7.點(diǎn)擊Case1添加用例

8.把歌名的[[item Column0]]改為[[item Column1]]，歌手依然是[[item Column0]]

?9.回到Home版，用例已經(jīng)被編輯好，右下角可以編輯操作臺(tái)列表里的內(nèi)容。

10.編輯完畢。

11.添加兩個(gè)輸入框和一個(gè)按鈕到Home版

12.編輯輸入框的名稱

13.選中“按鈕”，并且添加用例。

14. 選擇Column0的fx

15.添加局部變量，上下要一致，不要忘記加[[ ??]],選擇輸入框：輸入歌手名。

16.選擇Column1的fx，按照之前的流程編輯

17.回到Home，預(yù)覽添加行效果。

18.添加行

三.中繼器刪除行

1.加入“刪除”按鈕，調(diào)整按鈕大小。

?2.為刪除按鈕添加用例。

3.跳轉(zhuǎn)到中繼器版，按住Ctrl，右鍵點(diǎn)擊兩個(gè)方框，點(diǎn)擊組合。

?4.為此組合添加用例

?5.添加用例成功

6. 當(dāng)選中時(shí)狀態(tài)變化

?7.預(yù)覽

?8.選中，并且刪除。

本文由 @遠(yuǎn)洋 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。