Axure教程:數據分頁顯示
上一個教程中,我們講到了中繼器。今天呢,我們繼續講跟中繼器有關的。
中繼器可以顯示數據列表,但是當數據列表數據條數較多,如上百上千上萬的時候,一個頁面顯示可能會過于冗長。在這種情況下,通常的做法就是分頁顯示,每頁顯示固定條數的數據,可以進行上頁下頁進行查看數據,當然也可以指定頁碼直接跳轉。
我們先來個直觀的瞅瞅:
下面呢,我就帶大家一起來看一下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協議
RP文件可以分享下嘛,229772741@qq.com,謝謝老鐵
講的很模糊啊~