使用axure rp 8.0中的中繼器實現簡單的翻頁功能
阿新 • • 發佈:2019-01-10
1.在圖形庫中找到中繼器,選中拖到工作區域,中繼器初始的格式如下:
2.為了方便後續的操作,這裡我們首先需要修改一下中繼器的格式,雙擊進入中繼器編輯頁面,選中矩形,按住ctrl+滑鼠左鍵向右移,操作兩次,操作之後的介面如下:
3.在右邊中繼器的表格中新增資料,在“新增列”中命名資料欄位,count,name,age,再填寫各類欄位的資料,如下圖所示:
4.新增互動行為,選中中繼器,在互動中,選中“每項載入時”對錶格中的不同資料欄位進行匹配設定,如下所示:
按照以上方法,分別設定好了對應的資料欄位,設定效果如下:
5. 在“樣式"中對中繼器中的內容進行分頁顯示,在該中繼器中,總共有6條資料,我們分成兩頁顯示,每頁顯示3條資料內容,操作如下所示:
6. 新增兩個切換上下頁的按鈕,命名為上一頁,下一頁,具體操作如下:
7.為按鈕新增點選事件,在互動中選擇“滑鼠單擊時”-新增用例,這時會彈出用例編輯框,找到中繼器中的“設定當前顯示頁面”,將頁碼設定為“1”,操作如下所示:
如果想要每頁顯示不同的專案數量,在該中繼器頁面也同樣可以設定,如下所示(由於前面在樣式中我們已經設定了每一頁顯示3條資料,所以這一步其實是可以省略的)
“下一頁”按鈕新增互動事件的操作與“上一頁”類似,這裡不予贅述,操作如下:
8.ctrl+s儲存所有的設定,預覽翻頁效果,按F5快捷鍵,可以看到我們已經實現了簡單的翻頁功能,預覽效果如下:
單擊“上一頁”按鈕:
單擊“下一頁”按鈕:
作為菜鳥研究這個翻頁花了不少時間,學會之後發現自己真傻,這麼簡單的功能居然研究了這麼久,不過這也是慢慢熟悉操作的過程,對於比較熟練axure的老手來說,本文可能有點囉嗦,希望各位見諒哈。