AxureRP9 中继器的学习1

中继器(Repeater)和动态面板都是我们学习Axure会稍微感觉困难的地方。今天我们就先简单聊一下中继器。下面是我的一些学习过程和学习体会。因为我也接触Axure没多久,所以不足之处请大家多多包涵,帮忙指正。
学习的中继器使用有助于我们快速设计一些复杂的交互界面。 中继器主要用于动态表格,它其实也是个重复器。 AxureRP9 中继器的学习1_第1张图片
打开AxureRP9,新建一个页面并双击激活它,我们可以在Default元件库里的基本元件中找到中继器,用鼠标点击拖拽到你激活的页面中
AxureRP9 中继器的学习1_第2张图片
拖拽进来的效果是这样的
现在中继器中显示的是123,那么中继器中如何去添加数据呢 ?
这一步非常重要,按我们平常的编辑方式是双击然后添加文本,这一步做完关闭中继器之后,你会发现没有任何效果。AxureRP9 中继器的学习1_第3张图片
还有一种操作就是双击然后在中继器中添加一个文本标签,在文本标签中输入你想输入的文本,之后再关闭中继器,效果如图,123还是在,只不过被覆盖了。所以这种操作也不可取。AxureRP9 中继器的学习1_第4张图片
正确方法是选中你拖拽进来的中继器,然后在右侧样式中找到这个数据面板(中继器的数据来源)展开,然后就可以进行相应的编辑,这叫数据驱动,从而加载显示在页面中。
注意:在编辑中继器时,我们可以在中继器中设置排版,存放标签,但最好不要放文字,因为这样会与它原本的数据源冲突。
如果添加行就直接选中中继器(注意不是双击编辑)在样式中找到数据面板,点击新增行添加内容就可以。
那么如何在中继器页面中去添加列?步骤如下:
AxureRP9 中继器的学习1_第5张图片
步骤1:先在页面中添加一个表格,删除多余的行并将它移至中继器上方,然后选中复制(表格全部选中)。
AxureRP9 中继器的学习1_第6张图片
步骤2:选中中继器双击进行编辑,然后复制(Ctrl+V)
AxureRP9 中继器的学习1_第7张图片
步骤3:中继器不要关,点击右侧样式,将X、Y坐标都改成0。
AxureRP9 中继器的学习1_第8张图片
步骤4:将中继器中内容清空,点击关闭中继器。AxureRP9 中继器的学习1_第9张图片
页面效果,添加成功。
添加完列了之后我们会发现关于中继器的数据渲染这边,也就是数据源有了,但是页面上还没有数据。这是我们就要去交互动作里做设置文本的渲染。设置文本的数据来源就是中继器的数据源。
AxureRP9 中继器的学习1_第10张图片
选中中继器,点开右侧交互,我们会发现它有个默认绑定的交互。这里的Item Loaded是指每一项在加载时(数据渲染时)做什么动作,下面的[[Item.Column1]]的两个中括号代表获取一个变量的值放在中继器里,中继器的每一行都代表一个Item,与数据源中Column1这一列的值一一对应
AxureRP9 中继器的学习1_第11张图片点开目标元件,这里的目标指的是中继器的单元格名称,值指的是数据源中单元格的列名。也就是你想你的中继器页面中显示数据源中的哪一列,就改成那一列的名称。总之是一一对应的。注意:值要加中括号,不然的话就不是一个变量而是一个固定的值。如果不想自己手打,可以点fx图标进去选择你想要的数据来源。

如果还要在添加一列单元格的内容,可以用光标选中设置文本,后面有个添加目标,就可以再次重复上述操作去添加内容。
分页
AxureRP9 中继器的学习1_第12张图片
在中继器的样式里分页面板,可以设置分页显示,可以先添加相应的翻页按钮,给上一页和下一页按钮绑定点击事件,选择中继器中的设置当前选择页面,在页面那里选择下一页。
删除行
AxureRP9 中继器的学习1_第13张图片
在样本中的删除按钮上绑定点击交互事件,选择删除行的操作,选择操作的中继器。

你可能感兴趣的:(AxureRP9 中继器的学习1)