Axure教程-中继器与响应式的组合拳

gif2

因为所以

之所以写这个教程是因为各种…,所以就有了这个教程,总之这种通过中继器来实现元件快速复用和数据筛选等等交互的设计会大大降低工程的累赘减小RP文件的大小,否则你可以试试在多视图编辑的情况不停的复制带有交互的动态面板30个,会卡爆你,亲身经历一开始此工程文件是用surface3 PRO I7 8G 256GSSD画的,画着画着就卡的根本无法正常继续玩下去了,后来整理了一下思路,抱着试试看的心理用中继器来替代大量的元件复用的问题,结果豁然开朗,意外中新思维Git,这个方法去年7月份研究出来,一直没空整理,這段时间想给小伙伴们搞点小培训,觉得这个案例能说明很多知识点,故又被我挖出来了,此教程中的文件是删减版并用MAC进行再编辑的,过程都是一样的。

 Step1:激活“自动适配”并添加自适应视图的条件

716cf4c4-f553-4a38-b185-00eb134f6369
在基本视图下添加两个尺寸,分别是平板的尺寸,条件是宽度≤768,手机横向尺寸≤414,都继承于基本视图,如下图。

qq20161128-02x

Step2:添加中继器,命名为“stores”,并在中继器中添加数据字段和数据,如我们把店铺名称的字段命名为“StoreName”,并在该“StoreName”表里添加相关的数据记录

qq20161128-32x

Step3:在中继器中添加元件

這里需要注意的是文本和数据字段要分开,如综合分为文本,综合分记录值命名为“txt_synthetic score”(元件命名大家按自己的习惯命名即可)

508df5c2-c639-4e44-a97d-a34b6cf34989

Step4:数据绑定

中继器中的元件及数据表都做好后,就要对中继器中的元件和表中的数据进行绑定;

有两个注意点

  1. 由于我们后面还要添加筛选过滤的交互,所以数据绑定的触发条件用“每项加载时”;
  2. 设置 文字于 txt_StoreName1 = ‘[[Item.StoreName]]的门店’,注意函数表达式为[[Item.StoreName]]+“的门店”的组合字段,数据要和文本分开,数据要和文本分开,数据要和文本分开!

qq20161128-22x

数据绑定后的结果如下;

98fcf10d-e1c6-4113-bcf0-62384be2c0ef

Step5:添加移除筛选、简单筛选和条件筛选

制作一个默认排序按钮(btn_Default)和其他规则的排序按钮(如按综合分排序(btn_synthetic score)),按钮组的单选及选中时交互这里不讲了;

添加默认排序的点击事件,点击时移除中继器(stores)的所有排序规则;

qq20161128-42x

添加综合分的点击事件,当点击时添加中继器(stores)的排序,配置动作为属性选择中继器(stores)中的综合分字段(synthetic_score),排序类型选择Number,排序为升序;

qq20161128-02x

下来列表城市选择元件(droplist_provice)添加条件变化时进行不同的筛选事件,在“选项改变时”我们对被选项进行条件判断,当城市选择列表的选项值变为“省份时”移除中继器(stores)的所有筛选条件,否则更具下拉列表被选的值设为对中继器(stores)进行筛选的关键词,如下图。

0b67f482-94fe-4433-9723-c152c9f1d3ff

上图的写法比较死板,其实有更好的写法(只要两个判断,引入一个局部变量的方法即可),如下图,這就是我喜欢AxureRP的地方,所以AxureRP要学精的成本是很高的,同样的交互其实有很多种不同的方式去实现,当然这要看各位同学的理解能力了。

qq20161128-12x


[dm href=’http://demo.pmtemple.com/repeater1.0′]在线预览[/dm] [dl href=’http://demo.pmtemple.com/RP/%E4%B8%AD%E7%BB%A7%E5%99%A8%E4%B8%8E%E5%93%8D%E5%BA%94%E5%BC%8F%E7%9A%84%E7%BB%84%E5%90%88%E6%8B%B31.0.rp’]RP下载[/dl]

原创文章,作者:DevilStefanVIP会员,如若转载,请注明出处:https://www.pmtemple.com/fengsaitao/253/

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
DevilStefan的头像DevilStefanVIP会员神一样的存在
上一篇 2016年6月3日 下午12:59
下一篇 2017年4月12日 下午3:33

相关推荐

发表回复

登录后才能评论
微信公众号
微信公众号
edgesensor_high 小程序
小程序
分享本页
返回顶部