前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【Axure教程】如何通过中继器快速制作列表并进行删除数据操作

【Axure教程】如何通过中继器快速制作列表并进行删除数据操作

原创
作者头像
MoSiPM
发布2024-09-05 09:28:56
1480
发布2024-09-05 09:28:56
举报
文章被收录于专栏:Axure

很多小伙伴们在使用Axure制作原型时,经常会看到元件库中有一个元件【中继器】,但是很多小伙伴不太会使用中继器进行绘制一些高保真的原型。本期,我将带领大家学习如何使用中继器制作后台列表并进行删除的操作。

话不多说,直接进入主题。

1、在空白面板中拖入一个空白矩形,接着从左侧元件库中选择【中继器】元件。

2、选中【中继器】,在右侧【样式】中设置对应的字段名及数据内容,如下图所示(其中字段名及数据内容均可根据实际需求进行调整)

3、在【中继器】内部拖入【矩形】元件,将每个矩形分别命名设置如下样式,使其【矩形】元件对应中继器中所设置的列名,其中第一个【矩形】和最后一个【矩形】可以不进行命名(此处可以先进行无脑模仿操作)。

4、选中【中继器】,在左侧交互中分别设置对应的【矩形】名称,其中操作【值】时,选择【Fx】–【插入变量或函数】,选择【中继器】中对应的列名。

5、分别设置完成之后,我们再针对【设备编号】这个文本设置特殊一点的值,如下图右侧交互所示,TG_[[Item.id+1000]]表示在每一行id数字的前面加上TG_,在id后面加(+10000),此时,列表中的设备编号则会生成如下图【中继器】的列展示。

6、接着我们对【中继器】的列表上方拖拽【矩形】元件,编辑对应的列名并进行相应的美化,其中,中继器的行与行之间的交替可以参考下图所。操作到目前,【中继器】的第一步基础数据才刚设置完成,接着我们再继续往下看。

7、在【中继器】的最后一个矩形框内加入文本“修改”、“删除“,对【删除】设置交互状态【单击时–删除行–当前行】,此时,我们的中继器的直接删除效果就完成了。

8、接着,如果我们想要做一个点击【删除】时,做提醒弹窗,确认是否删除,我们先添加一个弹窗设置,如下图。

9、接着我们对弹窗进行隐藏设置,点击【删除】设置交互数据(由下图右侧数据)。此时,已经点击删除已经可以调出删除弹窗了。

10、接着,我们再对弹窗上的【删除】做交互,使其删除【中继器】中的行信息。

11、最后,我们对删除弹窗上的【取消】做交互(如下图右侧数据),这样一个中继器的删除流程就已经完成了

12、希望以上的【中继器】的【删除】操作可以帮助到大家,如有疑问,可以在下方留言哟,我会第一时间为大家解答,下一期,我将带大家学习如何在【中继器】中【新增】一条新的数据。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档