首页 > 技术文章 > Axure 中继器实现下拉菜单,中继器实现表格

chenzibai 2021-11-23 10:37 原文

场景:

  这几天在前端,要用Axure画原型做前端交互方案给客户看,于是学了一些axure的基础操作(主要从师妹那学的,哈哈哈),这里记录一下中继器做表格和下拉框的实现。

实现:

  一、中继器实现表格

  •   在元件库中使用中继器,中继器就相当于表格,但是功能比表格强大
  •  在元件的样式中添加数据的列(列名只能是英文),同时可以添加数据的行,注意这里只是数据的信息

  • 双击进入中继器,,可以看到一个默认的矩阵,添加新的矩阵(也可以是其他元件),这里的矩阵就是中继器样式的一列。添加的同时给矩阵命名,比如:列2

  • 退出中继器,可以看到中继器的样式以及多了几列,而中继器的行数是数据的行数。

  • 接下来,绑定中继器数据和样式。在中继器的交互中,点击交互事件每项加载时->设置文本,添加设置文本,选择之前添加的样式列(比如这里选择列3),在文本的value选择中,选择右边的fx,

  •  清除编辑文本中的值,选择“插入变量或函数”

  • 选择要绑定的数据列,就是中继器样式中的列:

  • 绑定结束,回到页面就可以看到数据和样式已经绑定。再加个列表头,表格就完成了。

  二、中继器实现下拉菜单

  •   先拉一个中继器和内联框架,内联框架可以用来显示页面
  • 中继器里面,用一个矩阵表示一级菜单,一个动态面板表示二级菜单,动态面板默认隐藏。动态面板有两个状态,一个是二级菜单,一个是空的,点击一级菜单才出现。交互内容如下,需要用到条件。

  • 二级菜单动态面板的交互,其实就是点击时在内联框架中打开链接。

  • 回到页面,最后绑定中继器的样式和数据,其中数据要右击单元格选择“引用页面”。如下:

  •  最后,我把这个小demo发布出来了,演示地址:https://9w425p.axshare.com

  • 如果有人需要,就留言给我吧。

推荐阅读