Axure RP8 教程:中繼器的列表增加與刪除
本文主要分享內容為如何使用中繼器(Repeater)的列表增加與刪除,適用于剛入門的小白產品。
中繼器(Repeater)是Axure RP8中的一款高級組件,主要在以列表形式(如商品列表、聯系人列表等)展示信息并對列表進行增刪改查,分頁、排序等操作的場景中,中繼器是你的不二選擇。本文用一個簡單的例子來演示中繼器的列表增加與刪除功能。
完成后效果如下圖,該例子主要實現列表的增加與刪除操作。
1.列表的增加
2.列表的刪除
為了達到更好的學習效果,建議您按照教程邊學邊做,以下是Axure RP 8 的實際操作流程
一.什么是中繼器
中繼器是一個數集的容器,中繼器一共有11個動作,其中包括6個中繼器動作和5個數據集動作。在原型制作中它可以導入圖片和數據。在交互上它可以實現新增行、刪除行、標記行、排序,篩選等,配合函數使用,中繼器可以實現的高級交互效果更多。
二.中繼器新增行
1. 我們先從元件庫里拉一個中繼器到操作區。
- 可以看到操作區列表顯示1 2 3,與右下角的中繼器列表對應。
- 操作區中繼器母版右上角的藍色小標簽與右邊檢查器中的Case1對應。
2.點擊操作臺上的中繼器版,跳轉到中繼器界面。
3.選中面板復制粘貼一個新的矩形,并且給兩個矩命名。
4. 回到Home版,發現操作區列表已經改變。
?5.在右下角增加新增列。
?6.添加成功
7.點擊Case1添加用例
8.把歌名的[[item Column0]]改為[[item Column1]],歌手依然是[[item Column0]]
?9.回到Home版,用例已經被編輯好,右下角可以編輯操作臺列表里的內容。
10.編輯完畢。
11.添加兩個輸入框和一個按鈕到Home版
12.編輯輸入框的名稱
13.選中“按鈕”,并且添加用例。
14. 選擇Column0的fx
15.添加局部變量,上下要一致,不要忘記加[[ ??]],選擇輸入框:輸入歌手名。
16.選擇Column1的fx,按照之前的流程編輯
17.回到Home,預覽添加行效果。
18.添加行
三.中繼器刪除行
1.加入“刪除”按鈕,調整按鈕大小。
?2.為刪除按鈕添加用例。
3.跳轉到中繼器版,按住Ctrl,右鍵點擊兩個方框,點擊組合。
?4.為此組合添加用例
?5.添加用例成功
6. 當選中時狀態變化
?7.預覽
?8.選中,并且刪除。
本文由 @遠洋 原創發布于人人都是產品經理。未經許可,禁止轉載。
評論
評論請登錄
2.為刪除按鈕添加用例。這個要先選【刪除行】,為什么【新增行】?
刪除選中之后貌似不能取消誒
按照作者的操作步驟來了, 但是我的column1沒有顯示出來哎,好奇怪···你知道什么原因嗎?
emmm···找到原因了····打擾了