翻頁践宴、排序和篩選成為了各類產品列表頁的基礎功能鲸匿，那么我們在進行原型設計時，是否能夠實現(xiàn)這樣的交互功能阻肩？本文以常見的電商列表頁為例带欢，講解如何利用Axure這一原型設計利器，實現(xiàn)列表頁中常見的翻頁烤惊、排序和篩選功能乔煞。
利用中繼器準備列表
列表頁中每一件商品包含的信息有：圖片、縮略圖撕氧、標題瘤缩、銷量、評價數(shù)伦泥，利用中繼器可以快速錄入相關信息剥啤。如下圖所示：
數(shù)據(jù)錄入完畢后，首先為中繼器設定每項加載時事件不脯，將之前錄入的數(shù)據(jù)信息與中繼器的項關聯(lián)起來府怯。本案例中繼器表格錄入的數(shù)據(jù)有價格（price)、銷量(sale)和評價數(shù)(evaluate)防楷，其他的如圖片牺丙、標題等一些信息并沒有錄入到中繼器數(shù)據(jù)集中，這些信息不影響本案例的交互設置复局。在樣式設置中冲簿，中繼器數(shù)據(jù)設置為網格布局，每排項目數(shù)為3亿昏，分頁顯示峦剔，每頁顯示6個項目，起始頁為第1頁角钩。
每項加載時交互時間：為價格（price）吝沫、銷量（sale）呻澜、評價數(shù)（evaluate）3個text以富文本的形式進行賦值，在中繼器/數(shù)據(jù)集中找到之前我們設定的列名惨险，如[[Item.price]]羹幸、[[Item.sale]]和[[Item.evaluate]]。交互動作配置如下圖所示：
載入時交互事件：添加當前顯示頁這一動作辫愉，從第一頁開始顯示栅受，配置動作中輸入頁碼填寫1，交互設置如下圖所示：
翻頁與頁碼跳轉
假設我們?yōu)榱斜眄撎砑?9件商品數(shù)據(jù)一屋，按照上文的中繼器樣式設置窘疮，則商品列表可顯示5頁。
元件準備
添加5個矩形元件作為頁碼冀墨，再添加2個矩形元件作為上一頁與下一頁的翻頁器闸衫，拖動一個文本標簽計算列表頁數(shù)，添加一個文本框诽嘉，用來輸入跳轉的頁碼蔚出，添加一個確定按鈕用來執(zhí)行頁碼的跳轉。
交互設置
01 固定頁跳轉
首先為5個頁碼實現(xiàn)點擊跳轉虫腋，5個頁碼的交互事件設置方法一樣的骄酗，為每個頁碼分別設置鼠標單擊事件，選中當前元件悦冀，中繼器顯示當前頁插入函數(shù)[[This.text]]趋翻。
翻頁
為上一頁元件添加鼠標單擊事件，中繼器顯示當前頁面為上一頁即Previous盒蟆；為下一頁元件添加鼠標單擊事件踏烙，中繼器顯示當前頁面為下一頁即Next。
指定頁跳轉
為確定按妞設置單擊事件历等，即中繼器當前顯示頁中插入函數(shù)[[LVAR1.text]],其中局部變量LVAR1為跳轉頁碼的文本框讨惩。
列表頁數(shù)
顯示共xx頁，為計數(shù)標簽設置鼠標單擊事件寒屯，配置當前元件的值為共[[LVAR1.pageCount]]頁荐捻，其中局部變量LVAR1為中繼器。函數(shù)pageCount 寡夹，用于獲取中繼器分頁的總數(shù)量处面，即能夠獲取分頁后共有多少頁。
列表排序
我們?yōu)樯唐妨斜硖砑拥呐判蛞?guī)則包含：綜合排序菩掏、價格升序鸳君、銷量降序、評價降序患蹂。將幾個排序規(guī)則設置為一個組或颊，為每個排序設置一個相同的選中效果，本案例的選中效果統(tǒng)一為填充紅色传于，白色字體囱挑。
01 價格升序
為價格元件設置鼠標單擊事件，動作配置如下：
1）將當前元件設置為選中
2）為中繼器添加排序規(guī)則沼溜，配置動作中名稱填寫為“價格由低到高”平挑，屬性選擇price，排序類型選擇Number系草，順序選擇升序
3）選中頁碼1
4）觸發(fā)中繼器載入時事件
交互設置如下圖所示：
02 銷量降序
為銷量元件設置鼠標單擊事件通熄，動作配置如下：
1）將當前元件設置為選中
2）為中繼器添加排序規(guī)則，配置動作中名稱填寫為“銷量降序”找都，屬性選擇sale唇辨，排序類型選擇Number，順序選擇降序
3）選中頁碼1
4）觸發(fā)中繼器載入時事件
交互設置如下圖所示：
03 評價降序
為評價元件設置鼠標單擊事件能耻，動作配置如下：
1）將當前元件設置為選中
2）為中繼器添加排序規(guī)則赏枚，配置動作中名稱填寫為“評價降序”，屬性選擇evaluate晓猛，排序類型選擇Number饿幅，順序選擇降序
3）選中頁碼1
4）觸發(fā)中繼器載入時事件
交互設置如下圖所示：
04 綜合排序
為綜合元件設置鼠標單擊事件，動作配置如下：
1）將當前元件設置為選中
2）移除中繼器全部排序
3）選中頁碼1
交互設置如下圖所示：
列表篩選
假設列表按照價格區(qū)間進行商品篩選戒职，篩選的價格區(qū)間包含：全部栗恩、1999以下、2000~3999洪燥，4000~5999磕秤，6000以上。將這5個篩選區(qū)間設置為一個組蚓曼，并設置相同的選中效果亲澡，選中效果統(tǒng)一為紅色填充，白色字體纫版。
（一）1999元以下
為當前元件設置鼠標單擊事件床绪，動作配置如下：
1）選中當前元件
2）為中繼器添加篩選條件，移除其他篩選其弊，名稱填寫1999元以下癞己，條件表達式為[[Item.price<=1999]]。
（二）6000元以上
為當前元件設置鼠標單擊事件梭伐，動作配置如下：
1）選中當前元件
2）為中繼器添加篩選條件痹雅，移除其他篩選，名稱填寫6000元以上糊识，條件表達式為[[Item.price>=6000]]绩社。
（三）2000~3999元
設當前元件置鼠標單擊事件摔蓝，動作配置如下：
1）選中當前元件
2）為中繼器添加篩選條件，移除其他篩選愉耙，名稱填寫2000元~3999元之間贮尉，條件表達式為[[Item.price<=3999&&Item.price>=2000]]柱彻。
（四）4000~5999元
為當前元件設置鼠標單擊事件莹汤，動作配置如下：
1）選中當前元件
2）為中繼器添加篩選條件，移除其他篩選辨嗽，名稱填寫4000元~5999元之間赌渣，條件表達式為[[Item.price<=5999&&Item.price>=4000]]魏铅。
（五）全部
為當前元件設置鼠標單擊事件，動作配置如下：
1）選中當前元件
2）移除全部篩選條件坚芜，條件表達式為[[Item.price>0]]
如果你對Axure或原型設計有興趣览芳，希望系統(tǒng)性地學習Axure知識，掌握更多Axure使用技巧货岭；或者希望通過臨摹交互案例路操，進一步提升高保交互設計能力。請點擊下方關注按鈕千贯，查看更多連載作品屯仗。
