Axure RP8 教程:中继器的列表增加与删除

Arthur
4 评论 35862 浏览 69 收藏 8 分钟
🔗 技术知识、行业知识、业务知识等,都是B端产品经理需要了解和掌握的领域相关的知识,有助于进行产品方案设计和评估

本文主要分享内容为如何使用中继器(Repeater)的列表增加与删除,适用于刚入门的小白产品。

中继器(Repeater)是Axure RP8中的一款高级组件,主要在以列表形式(如商品列表、联系人列表等)展示信息并对列表进行增删改查,分页、排序等操作的场景中,中继器是你的不二选择。本文用一个简单的例子来演示中继器的列表增加与删除功能。

完成后效果如下图,该例子主要实现列表的增加与删除操作。

1.列表的增加

2.列表的删除

为了达到更好的学习效果,建议您按照教程边学边做,以下是Axure RP 8 的实际操作流程

一.什么是中继器

中继器是一个数集的容器,中继器一共有11个动作,其中包括6个中继器动作和5个数据集动作。在原型制作中它可以导入图片和数据。在交互上它可以实现新增行、删除行、标记行、排序,筛选等,配合函数使用,中继器可以实现的高级交互效果更多。

二.中继器新增行

1. 我们先从元件库里拉一个中继器到操作区。

  1. 可以看到操作区列表显示1 2 3,与右下角的中继器列表对应。
  2. 操作区中继器母版右上角的蓝色小标签与右边检查器中的Case1对应。

2.点击操作台上的中继器版,跳转到中继器界面。

3.选中面板复制粘贴一个新的矩形,并且给两个矩命名。

4. 回到Home版,发现操作区列表已经改变。

 5.在右下角增加新增列。

 6.添加成功

7.点击Case1添加用例

8.把歌名的[[item Column0]]改为[[item Column1]],歌手依然是[[item Column0]]

 9.回到Home版,用例已经被编辑好,右下角可以编辑操作台列表里的内容。

10.编辑完毕。

11.添加两个输入框和一个按钮到Home版

12.编辑输入框的名称

13.选中“按钮”,并且添加用例。

14. 选择Column0的fx

15.添加局部变量,上下要一致,不要忘记加[[   ]],选择输入框:输入歌手名。

16.选择Column1的fx,按照之前的流程编辑

17.回到Home,预览添加行效果。

18.添加行

三.中继器删除行

1.加入“删除”按钮,调整按钮大小。

 2.为删除按钮添加用例。

3.跳转到中继器版,按住Ctrl,右键点击两个方框,点击组合。

 4.为此组合添加用例

 5.添加用例成功

6. 当选中时状态变化

 7.预览

 8.选中,并且删除。

 

本文由 @远洋 原创发布于人人都是产品经理。未经许可,禁止转载。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 2.为删除按钮添加用例。这个要先选【删除行】,为什么【新增行】?

    来自广东 回复
  2. 删除选中之后貌似不能取消诶

    来自广东 回复
    1. 按照作者的操作步骤来了, 但是我的column1没有显示出来哎,好奇怪···你知道什么原因吗?

      来自上海 回复
    2. emmm···找到原因了····打扰了

      来自上海 回复
专题
65357人已学习17篇文章
每个网站或APP,发展到了一定的阶段,用户积分体系都是不可或缺的。
专题
12086人已学习12篇文章
针对新零售行业的发展现状,面向新零售企业的SaaS系统,可以如何进行系统架构和规划?本专题的文章分享了新零售saas架构指南。
专题
17521人已学习14篇文章
本专题的文章分享了如何设计B端SaaS产品及B端SaaS产品方法论。
专题
15222人已学习13篇文章
营销自动化是一个可用于自动执行营销任务的工具。本专题的文章分享了如何搭建自动化营销平台。
专题
20296人已学习14篇文章
好的用户成长体系可以促进用户活跃、增强用户粘性、留住用户和帮助企业更好地了解用户对产品的使用情况。本专题的文章提供了搭建用户成长体系的思路。
专题
12712人已学习12篇文章
企业想扩大自身的知名度和影响力都离不开新媒体。本专题的文章分享了企业新媒体运营指南。