当前位置：网站首页 > 创业 > 正文

利用Axure中继器实现简单的商品新增、删除

张子豪 2025-10-11 11:48 1

Axure中的中继器是一个数据集，中继器可以看作是一个姑且的数据库，可以演示数据的存、读、删、改，用于设计高级交互。

本文介绍的是操纵Axure 8的中继器这个元件，实现简单的商品新增、删除、全数删除的功能。

东西/原料

电脑
Axure RP 8

方式/步调

1
打开Axure，建立一个新的rp文件，在左侧东西栏根基元件中，找到“中继器”；
将元件拖到index页面中，并将该元件定名为“商品中继器”。
2
双击中继器，进入了中继器的编纂页面。
3
中继器页面中自带的阿谁矩形元件可以删失落，然后插手我们需要显示的元件；
a、插手6个文本标签元件，用于显示商品的三个属性：名称、类型、数目
b、名称后的文本标签元件定名为“name”
c、类型后的文本标签元件定名为“type”
d、数目后的文本标签元件定名为“quantity”
4
在右侧东西栏中继器属性中，设置中继器的三个列题目为“name”、“type”、“quantity”，并在中继器列表中，输入几条商品数据。
5
给中继器添加用例（绑定命据集与元件）：
1、双击“每项加载时”，打开用例编纂页；
2、在添加动作栏，勾选“元件”下的“设置文本”
3、在设置装备摆设动作栏，勾选元件“name（矩形）”
4、点击“fx”，打开编纂文本窗口，将“文本标签”这几个字删失落
5、点击“插入变量或函数”，选择“中继器/数据集”下的“Item.name”（与前面设置装备摆设动作栏中的元件名对应），确定后完当作一个元件的数据集绑心猿意马
6、反复以上步调，别离对“type（矩形）”、“quantity（矩形）”这两个元件进行数据集绑心猿意马
7、完当作用例设置后，点击F5运行一下，查抄元件没有和对应的数据集绑心猿意马在一路
8、预览可以看到，中继器中预先输入的3条商品数据都显示出来了
6
为了页面加倍都雅，我们给中继器里的内容用矩形做一个布景，并将中继器页面里的内容放在右上角
7
切换页面到“index”，可以看到中继器中的内容可以在该页面展示；
更改样式：
1、选中中继器元件，点击右侧功能栏中的“样式”
2、设置结构为垂直或程度，勾选“收集排布”
3、设置每排项目数为5，行、列间距为10
此时中继器中的内容块将按5*5，间距为10的矩阵排布，如许设置后，使得中继器中的内容分布更平均都雅。
8
在本家儿页中，插手用于新增商品名称、类型、数目的文本框：
1、名称对应的文本框元件定名为“name”
2、类型对应的文本框元件定名为“type”
3、数目对应的文本框元件定名为“quantity”
9
实现新增商品功能：
1、用按钮元件，做一个“新增”按钮，元件定名为“add”
2、选中新增按钮，右侧功能栏双击“鼠标单击时”，打开用例编纂页
3、添加动作栏中，选择中继器下数据集中的“添加行”，设置装备摆设动作栏中勾选我们建立的中继器元件
4、点击设置装备摆设动作栏的“添加行”，打开添加行到中继器编纂窗
5、点击name列的“fx”，点击“添加局部变量”，元件选择“name（文本框）”
6、点击“插入变量或函数”，选择方才建立的局部变量“LVAR1”
7、确定后回到添加行到中继器编纂窗
8、同样的方式对type、quantity列进行操作，注重局部变量名不要反复
9、用例编纂好后，F5运行测试一下，此时已实现了新增功能
10
实现删除商品功能：
1、双击中继器，进去中继器编纂页
2、用按钮元件，在中继器页面中做一个“删除”按钮，元件定名为“delete”
3、选中删除按钮，右侧功能栏双击“鼠标单击时”，打开用例编纂页
4、添加动作栏中，选择中继器下数据集中的“删除行”，设置装备摆设动作栏中勾选我们建立的中继器元件，单选“this”
5、确定完当作用例，F5运行测试一下，此时已实现了删除功能
11
实现删除全数商品功能：
1、切换页面到“index”，用按钮元件，做一个“全数删除”按钮，元件定名为“deleteall”
2、选中全数删除按钮，右侧功能栏双击“鼠标单击时”，打开用例编纂页
3、添加动作栏中，选择中继器下数据集中的“删除行”，设置装备摆设动作栏中勾选我们建立的中继器元件，前提填写“true”，即中继器中有值的都删除
4、确定完当作用例，F5运行测试一下，此时已实现了全数删除功能
12
操纵中继器实现商品的新增、删除、全数删除功能，都完当作后，可以对页面进行必然的美化，设计一下UI。
这里我做了一个简单的UI，可以进去看一下功能跟结果：https://5d9ew4.axshare.com/#c=2
Axure源文件百度网盘地址：1VsatX88QG2GBfm2i-k9GoQ
暗码：zy8g