Axure高保真原型设计之中继器模拟查询

ALoong
1 评论 3683 浏览 3 收藏 5 分钟
🔗 技术知识、行业知识、业务知识等,都是B端产品经理需要了解和掌握的领域相关的知识,有助于进行产品方案设计和评估

编辑导语:中继器该怎么模拟查询?作者从五个方面进行了中继器的模拟查询操作,我们一起来看看吧。

先上最终效果图:

一、以按行政区划查询为例

1. 先准备好数据

2. 绘制界面框架

  • 注1:如果所属地区下拉列表不想显示后面的行政区划代码,可以采用隐藏的中继器作为下拉列表项实现,此处略;
  • 注2:Axure对于函数的使用非常有限,所以借用了一个隐藏的框“所属地区列表Value”,初始值为“33”,其后所属地区下拉框选中项值发生变化时,将所属地区的值取最后6位数字,表达式为:[[LVDQ.substr(LVDQ.indexOf(‘_’)+1,6).replace(’00’,”)]](这里使用了字符串的substr函数,同时使用replace函数把后面的“00”去掉)。

这样设计的目的是为了简化查询功能中的逻辑处理(主要还是Axure抽风,后面indexOf函数没法直把上面的公式放进去)。

3. 功能:为数据列表中继器添加过滤器

过滤器条件为:[[(Item.sjxzjb==LVJB || Item.sjxzjb==’省级’ || Item.sjxzjb==’地市级’)&& Item.sjqhdm.indexOf(LVDQ)>-1 ]],目的是当选的显示省级、地市级,是否要显示县级有展示级别“LVJB”决定,同时通过后面的indexOf函数进行过滤,这样就能够达到看啥都带上本级。(不信看最后演示动画)

4. 分页功能

(1)每页显示数据行数

当然默认中继器也需要开启分页为“多页”,每页项“10”,开始页:“1”。

(2)分页导航:首页

设置中继器当前页面值为“1”。

(3)分页导航:上一页

设置中继器页面到上一个。

(4)分页导航:下一页

设置中继器页面到下一个。

(5)分页导航:最后一页

设置中继器页面到最后一个(Last)。

(6)分页导航:手动修改指定页

手动修改后把中继器当前修改为修改后的值,这里做下判断,仅1~总页数范围内有效,否则弹出alert进行提醒,Axure中想使用javascript脚本的话,可以使用当前页面打开链接外部地址内容为:javascript:{alert(‘巴拉巴拉…’);}

(7)中继器的总页数、当前页数写入到分页栏里

在中继器每项加载时,设置分页栏的总页数[[Item.Repeater.pageCount]]、当前页码[[Item.Repeater.pageIndex]]。

5. 最终动画演示

 

本文由 @ALoong 原创发布于人人都是产品经理,未经许可,禁止转载

题图来自Unsplash,基于CC0协议

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 原型发一个嘛

    来自安徽 回复
专题
12311人已学习10篇文章
对于产品、运营人,在不同的职业发展阶段,所需要关注的重点也不同。本专题的文章分享了运营人如何规划职业生涯。
专题
70585人已学习13篇文章
什么是产品的商业模式,不同类型的产品在商业模式上有什么区别?
专题
13849人已学习12篇文章
如何快速了解一个行业?这需要你对这一行业进行细致的调研,了解当下的整体市场环境与未来的发展趋势,进而为后续的产品规划做好准备。本专题的文章分享了行业调研指南。
专题
14700人已学习13篇文章
交互设计是用户与产品以及他们使用的服务之间建立的有意义的关系。
专题
11563人已学习12篇文章
从二维到三维空间的过渡,其交互范式也会随之从2D GUI时代转换到3D UI时代。本专题的文章分享了XR空间交互指南。