1. 程式人生 > >使用axure rp 8.0中的中繼器實現簡單的翻頁功能

使用axure rp 8.0中的中繼器實現簡單的翻頁功能

1.在圖形庫中找到中繼器,選中拖到工作區域,中繼器初始的格式如下:

 2.為了方便後續的操作,這裡我們首先需要修改一下中繼器的格式,雙擊進入中繼器編輯頁面,選中矩形,按住ctrl+滑鼠左鍵向右移,操作兩次,操作之後的介面如下:

 3.在右邊中繼器的表格中新增資料,在“新增列”中命名資料欄位,count,name,age,再填寫各類欄位的資料,如下圖所示:

 

 4.新增互動行為,選中中繼器,在互動中,選中“每項載入時”對錶格中的不同資料欄位進行匹配設定,如下所示:

按照以上方法,分別設定好了對應的資料欄位,設定效果如下:

 

5. 在“樣式"中對中繼器中的內容進行分頁顯示,在該中繼器中,總共有6條資料,我們分成兩頁顯示,每頁顯示3條資料內容,操作如下所示:

 

6. 新增兩個切換上下頁的按鈕,命名為上一頁,下一頁,具體操作如下:

7.為按鈕新增點選事件,在互動中選擇“滑鼠單擊時”-新增用例,這時會彈出用例編輯框,找到中繼器中的“設定當前顯示頁面”,將頁碼設定為“1”,操作如下所示:

 如果想要每頁顯示不同的專案數量,在該中繼器頁面也同樣可以設定,如下所示(由於前面在樣式中我們已經設定了每一頁顯示3條資料,所以這一步其實是可以省略的)

 “下一頁”按鈕新增互動事件的操作與“上一頁”類似,這裡不予贅述,操作如下:

8.ctrl+s儲存所有的設定,預覽翻頁效果,按F5快捷鍵,可以看到我們已經實現了簡單的翻頁功能,預覽效果如下:

單擊“上一頁”按鈕:

單擊“下一頁”按鈕:

作為菜鳥研究這個翻頁花了不少時間,學會之後發現自己真傻,這麼簡單的功能居然研究了這麼久,不過這也是慢慢熟悉操作的過程,對於比較熟練axure的老手來說,本文可能有點囉嗦,希望各位見諒哈。