翻页、排序和筛选成为了各类产品列表页的基础功能，那么我们在进行原型设计时，是否能够实现这样的交互功能？本文以常见的电商列表页为例，讲解如何利用Axure这一原型设计利器，实现列表页中常见的翻页、排序和筛选功能。
利用中继器准备列表
列表页中每一件商品包含的信息有：图片、缩略图、标题、销量、评价数，利用中继器可以快速录入相关信息。如下图所示：
数据录入完毕后，首先为中继器设定每项加载时事件，将之前录入的数据信息与中继器的项关联起来。本案例中继器表格录入的数据有价格（price)、销量(sale)和评价数(evaluate)，其他的如图片、标题等一些信息并没有录入到中继器数据集中，这些信息不影响本案例的交互设置。在样式设置中，中继器数据设置为网格布局，每排项目数为3，分页显示，每页显示6个项目，起始页为第1页。
每项加载时交互时间：为价格（price）、销量（sale）、评价数（evaluate）3个text以富文本的形式进行赋值，在中继器/数据集中找到之前我们设定的列名，如[[Item.price]]、[[Item.sale]]和[[Item.evaluate]]。交互动作配置如下图所示：
载入时交互事件：添加当前显示页这一动作，从第一页开始显示，配置动作中输入页码填写1，交互设置如下图所示：
翻页与页码跳转
假设我们为列表页添加29件商品数据，按照上文的中继器样式设置，则商品列表可显示5页。
元件准备
添加5个矩形元件作为页码，再添加2个矩形元件作为上一页与下一页的翻页器，拖动一个文本标签计算列表页数，添加一个文本框，用来输入跳转的页码，添加一个确定按钮用来执行页码的跳转。
交互设置
01 固定页跳转
首先为5个页码实现点击跳转，5个页码的交互事件设置方法一样的，为每个页码分别设置鼠标单击事件，选中当前元件，中继器显示当前页插入函数[[This.text]]。
翻页
为上一页元件添加鼠标单击事件，中继器显示当前页面为上一页即Previous；为下一页元件添加鼠标单击事件，中继器显示当前页面为下一页即Next。
指定页跳转
为确定按妞设置单击事件，即中继器当前显示页中插入函数[[LVAR1.text]],其中局部变量LVAR1为跳转页码的文本框。
列表页数
显示共xx页，为计数标签设置鼠标单击事件，配置当前元件的值为共[[LVAR1.pageCount]]页，其中局部变量LVAR1为中继器。函数pageCount ，用于获取中继器分页的总数量，即能够获取分页后共有多少页。
列表排序
我们为商品列表添加的排序规则包含：综合排序、价格升序、销量降序、评价降序。将几个排序规则设置为一个组，为每个排序设置一个相同的选中效果，本案例的选中效果统一为填充红色，白色字体。
01 价格升序
为价格元件设置鼠标单击事件，动作配置如下：
1）将当前元件设置为选中
2）为中继器添加排序规则，配置动作中名称填写为“价格由低到高”，属性选择price，排序类型选择Number，顺序选择升序
3）选中页码1
4）触发中继器载入时事件
交互设置如下图所示：
02 销量降序
为销量元件设置鼠标单击事件，动作配置如下：
1）将当前元件设置为选中
2）为中继器添加排序规则，配置动作中名称填写为“销量降序”，属性选择sale，排序类型选择Number，顺序选择降序
3）选中页码1
4）触发中继器载入时事件
交互设置如下图所示：
03 评价降序
为评价元件设置鼠标单击事件，动作配置如下：
1）将当前元件设置为选中
2）为中继器添加排序规则，配置动作中名称填写为“评价降序”，属性选择evaluate，排序类型选择Number，顺序选择降序
3）选中页码1
4）触发中继器载入时事件
交互设置如下图所示：
04 综合排序
为综合元件设置鼠标单击事件，动作配置如下：
1）将当前元件设置为选中
2）移除中继器全部排序
3）选中页码1
交互设置如下图所示：
列表筛选
假设列表按照价格区间进行商品筛选，筛选的价格区间包含：全部、1999以下、2000~3999，4000~5999，6000以上。将这5个筛选区间设置为一个组，并设置相同的选中效果，选中效果统一为红色填充，白色字体。
（一）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或原型设计有兴趣，希望系统性地学习Axure知识，掌握更多Axure使用技巧；或者希望通过临摹交互案例，进一步提升高保交互设计能力。请点击下方关注按钮，查看更多连载作品。
点击获取案例作品源文件