恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
使用Axure中继器制作动态数据的单选效果
0.0°
2019-04-11 原创文章 经验/观点 举报 3654 1 4 1

使用控件的四态视觉设置及单选组只能对静态控件制作单选效果,对于动态数据创建的控件则毫无办法。这里提供利用中继器解决动态数据单选的问题;

使用控件的四态视觉设置及单选组只能对静态控件制作单选效果,对于动态数据创建的控件则毫无办法。这里提供利用中继器解决动态数据单选的问题;


本经验使用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,勿喷~


欢迎讨论指正;

更新:2019-04-11

收藏

1人已收藏

  • 1

    作品

  • 1

    粉丝

  • 0

    关注

    猜你喜欢

      2019-04-11 原创文章 经验/观点 举报 3654 1 4 1

      使用Axure中继器制作动态数据的单选效果

      0.0°

      你确定要举报使用Axure中继器制作动态数据的单选效果

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年04月10日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      4
      1
      1

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录