在画原型图的时候,除了添加行、删除行、更新行,我们还需要对中继器表格的某一列进行排序,包括升序、降序、无排序三种状态。接下来,我们学习一下如何进行中继器的排序(商品价格)操作。
1、新建页面"中继器排序":我们把上一篇文章: Axure RP 9 中继器原理——更新行 的原型图全部复制一下,
一、倒序
1.1 到 阿里巴巴矢量图标库 复制“倒序”图标到原型图中,宽高设置为:30 X 50,将倒序图标设置为“转换为动态面板”,中继器名称命名为“价格排序”。
1.2 双击该图标,进入动态面板状态,将该状态命名为“倒序”。
1.3 设置倒序交互,“新建交互”——>目标:“(中继器)”——>列“sale”——>排序类型“Number”——>排序“升序”——>“完成”。
1.4 继续“添加动作”——>“设置面板状态”——>目标“价格排序”——>STATE“升序”——>“完成”。
二、升序
2.1 在动态面板中,“添加状态”,并命名为“升序”。到 阿里巴巴矢量图标库 复制“升序”图标到原型图中,宽高设置为:30 X 50。
2.2 设置升序交互,“新建交互”——>“单击时”——>“设置面板状态”——>目标“价格排序”——>STATE“无排序”——>“完成”。
2.3 继续“添加动作”——>“移除排序”——>目标“(中继器)”——>排序“全部”——>“完成”。
三、无排序
3.1 在动态面板中,“添加状态”,并命名为“无排序”。将“倒序”、“升序”两个图标复制到原型图中,并CTRL+G组合,设置合适的 宽 X 高。
3.2 选中该组合,“新建交互”——>“添加排序”——>目标“(中继器)”——>列“sale”——>排序类型“Number”——>排序“降序”——>“完成”。
3.3 继续“添加动作”——>“设置面板状态”——>目标“价格排序”——>STATE“倒序”——>“完成”。
最后,我们预览一下效果。
刚添加完成的状态,目前的顺序是:3 、2 、4。
我们点击一下,出现升序的状态:2、3、4。
再点击一下,处于无排序状态,回到初始的排序状态:3、2、4。
再点击一下,到了降序状态。
实验操作成功!完结,撒花花~