提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
使用控件的四态视觉设置及单选组只能对静态控件制作单选效果,对于动态数据创建的控件则毫无办法。这里提供利用中继器解决动态数据单选的问题;
使用控件的四态视觉设置及单选组只能对静态控件制作单选效果,对于动态数据创建的控件则毫无办法。这里提供利用中继器解决动态数据单选的问题;
本经验使用Axure 8.0.0.3297版本制作;
目标效果:
点击某一项实现单选切换,选项本身是随数据动态生成的;


制作方法:
1. 拖动一个中继器到页面中;设置列1第1行的值为1,其余为0;后续我们用1代表选中,0代表未选中。


2,双击中继器,编辑里面的矩形的选中视觉样式。

接下来就要考虑,如何通过点击中继器中单个实例中的矩形实现中继器范围内的单选;我试验了一下,直接通过单选组是无法在全部中继器范围内实现单选的,因此需要借助中继器附带的一些动作;
3. 给中继器中的矩形添加一个单击事件,设置一个中继器更新行的动作,将刚才保存选中状态的当前行的值设置为1,当前行用this表示;、

这样我们会发现,现在每点击一个矩形,它的数字都会从0变成1,那么接下来就是要考虑如何点击一个矩形,其他矩形都变成0,之有这个矩形变成1。

4.接下来,在刚刚的动作前增加一个标记动作,选择标记所有,现在中继器的所有项都被标记了;

5.再在两个动作间,添加一个更新行动作,对已经标记的所有行的column0的值都设置为0;

这样动作按照顺序执行下来,每次更新数值1之前,都会标记所有项,并把它们设置为0,达到了单选的效果;预览一下,每次仅点击的矩形数字变成了1,其他都是09

接下来就是让数据的变化转化为视觉的变化了,刚刚我们已经设置了矩形的选中状态的视觉效果,现在就是让数字变化触发它即可;
6. 继续选中中继器里的矩形,添加一个“载入时”的事件,没有可以通过更多事件添加;
然后,设置带有条件的用例,双击case1,弹出条件设置弹窗,选择值,然后选择右侧的fx,在里面添加中继器变量[[Item.Comlumn0]]
(如果不会写变量,可以点击插入变量或函数,选择自己需要的变量,这里就是所有目前可以引用的变量,其中Item.Comlumn0代表中继器中当前行的column0的值,我们刚刚就是拿它存储选中状态)

然后设置条件为,当值(Item.Comlumn0)等于值0的时候,也就是说当条件为这个行的值是0的时候,执行下面的动作;

设置矩形的选中状态为false,这样当这一行为0的时候,矩形会取消选中;

同样经历上述过程,再设置一个当Item.Comlumn0=1的时候,矩形选中状态为true的条件用例;


最后我们就得出这样两个条件用例,当column0=0时,取消选中,column0=1时,选中矩形;

预览一下,我们刚刚设置的视觉状态已经可以生效了;

因为中继器数据是动态的,你可以在这个基础上增加其他字段列,实现各种基于动态数据效果;(比如,下图中你还可以让他多个周九、钱十之类的~,或者添加个小删除按钮,删除这一行数据)

水平low,勿喷~
欢迎讨论指正;
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册