Axure教程:數據分頁顯示

2 評論 7830 瀏覽 16 收藏 4 分鐘

上一個教程中,我們講到了中繼器。今天呢,我們繼續講跟中繼器有關的。

中繼器可以顯示數據列表,但是當數據列表數據條數較多,如上百上千上萬的時候,一個頁面顯示可能會過于冗長。在這種情況下,通常的做法就是分頁顯示,每頁顯示固定條數的數據,可以進行上頁下頁進行查看數據,當然也可以指定頁碼直接跳轉。

我們先來個直觀的瞅瞅:

下面呢,我就帶大家一起來看一下Axure中如何實現這種效果。

話不多說,還是按照我們以往的套路來講解。

下文將從3個方面來展開。

1. 需求分析

首先先來看一下這個具體的需求是什么?

需求比較簡單:數據列表數據過多時,需要分頁展示,并且可以上下頁進行查看,還可以指定頁碼跳轉至指定頁面。

從上面的描述,我們看到關鍵詞“分頁顯示”。其實這里用到的就是是中繼器中分頁功能。

2. Axure關鍵點分析

2.1 中繼器,設置數據列表

中繼器的設置上一章已經講過了,不在贅述。這里著重講一下序號字段的邏輯,這里用到的函數為[[(Item.Repeater.pageIndex-1)*12+Item.index]]。

這個案例里,每頁設置為顯示12條數據。函數Item.Repeater.pageIndex是用來標識中繼器當前顯示的頁數,函數Item.index是用來標識當前頁面的第幾條數據。

解釋之后,相信小伙伴們都能理解上面公式的含義了。若理解不了,再仔細琢磨琢磨? :)

2.2 設置全局變量CurrentPage

默認值為1,用來記錄當前所處的頁面。

2.3 上一頁和下一頁跳轉

這個實際上運用的是中繼器的“設置當前顯示頁面”,上一頁為Previous,下一頁為Next。

2.4 跳轉指定頁面

設置頁碼,點擊對應頁碼后跳轉至響應的頁面。運用的是實際上還是中繼器的“設置當前顯示頁面”。

3. 效果展示

最后,我們來看一下最終效果,網址為:https://bm3rdb.axshare.com

 

本文由 @翠baby 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. RP文件可以分享下嘛,229772741@qq.com,謝謝老鐵

    來自廣東 回復
  2. 講的很模糊啊~

    來自廣東 回復