上一個教程中，我們講到了中繼器。今天呢，我們繼續(xù)講跟中繼器有關(guān)的。

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

我們先來個直觀的瞅瞅：

下面呢，我就帶大家一起來看一下Axure中如何實現(xiàn)這種效果。

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

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

1. 需求分析

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

需求比較簡單：數(shù)據(jù)列表數(shù)據(jù)過多時，需要分頁展示，并且可以上下頁進(jìn)行查看，還可以指定頁碼跳轉(zhuǎn)至指定頁面。

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

2. Axure關(guān)鍵點分析

2.1 中繼器，設(shè)置數(shù)據(jù)列表

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

這個案例里，每頁設(shè)置為顯示12條數(shù)據(jù)。函數(shù)Item.Repeater.pageIndex是用來標(biāo)識中繼器當(dāng)前顯示的頁數(shù)，函數(shù)Item.index是用來標(biāo)識當(dāng)前頁面的第幾條數(shù)據(jù)。

解釋之后，相信小伙伴們都能理解上面公式的含義了。若理解不了，再仔細(xì)琢磨琢磨? ：）

2.2 設(shè)置全局變量CurrentPage

默認(rèn)值為1，用來記錄當(dāng)前所處的頁面。

2.3 上一頁和下一頁跳轉(zhuǎn)

這個實際上運用的是中繼器的“設(shè)置當(dāng)前顯示頁面”，上一頁為Previous，下一頁為Next。

2.4 跳轉(zhuǎn)指定頁面

設(shè)置頁碼，點擊對應(yīng)頁碼后跳轉(zhuǎn)至響應(yīng)的頁面。運用的是實際上還是中繼器的“設(shè)置當(dāng)前顯示頁面”。

3. 效果展示

最后，我們來看一下最終效果，網(wǎng)址為：https://bm3rdb.axshare.com

本文由 @翠baby 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議