养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

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

时间:2024-10-01 19:36:32

Axure中的中继器是一个数据集,中继器可以看作是一个临时的数据库,可以演示数据的存、读、删、改,用于设计高级交互。本文介绍的是利用Axure8的中继器这个元件,实现简单的商品新增、删除、全部删除的功能。

工具/原料

电脑

AxureRP8

方法/步骤

1、打开Axure,创建一个新的rp文件,在左侧工具栏基本元件中,找到“中继器”;将元件拖到index页面中,并将该元件命名为“商品中继器”。

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

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

2、双击中继器,进入了中继器的编辑页面。

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

3、中继器页面中自带的那个矩形元件可以删掉,然后加入我们需要显示的元件;a、加入6个文本标签元件,用于显示商品的三个属性:名称、类型、数量b、名称后的文本标签元件命名为“name”c、类型后的文本标签元件命名为“type”d、数量后的文本标签元件命名为“quantity”

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

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

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

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

4、在右侧工具栏中继器属性中,设置中继器的三个列标题为“name”、“type”、“quantity”,并在中继器列表中,输入几条商品数据。

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

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

5、给中继器添加用例(绑定数据集与元件):双击“每项邹菁惨挣加载时”,打开用例编辑页;在添加动作栏,勾选“元件”下的“设置文本”在配置动作栏,勾选元件“name(捷态奥轹矩形)”点击“fx”,打开编辑文本窗口,将“文本标签”这几个字删掉点击“插入变量或函数”,选择“中继器/数据集”下的“Item.name”(与前面配置动作栏中的元件名对应),确定后完成一个元件的数据集绑定重复以上步骤,分别对“type(矩形)”、“quantity(矩形)”这两个元件进行数据集绑定完成用例设置后,点击F5运行一下,检查元件没有和对应的数据集绑定在一起预览可以看到,中继器中预先输入的3条商品数据都显示出来了

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

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

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

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

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

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

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

6、为了页面更加好看,我们给中继器里的内容用矩形做一个背景,并将中继器页面里的内容放在右上角

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

7、切换页面到“index”,可以看到中继器中的内容可以在该页面展示;更改样式:选中中继器元件,点击右侧功能栏中的“样式”设置布局为垂直或水平,勾选“网络排布”设置每排项目数为5,行、列间距为10此时中继器中的内容块将按5*5,间距为10的矩阵排布,这样设置后,使得中继器中的内容分布更均匀好看。

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

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

8、在主页中,加入用于新增商品名称、类型、数量的文本框:名称对应的文本框元件命名为“name”类型对应的文本框元件命名为“type”数量对应的文本框元件命名为“quantity”

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

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

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

9、实现新增商品功能:用按钮元件,做一个“新增”按钮,元件命名僭轿魍儿为“add”选中新增按钮,右侧功能栏双击“鼠标单击时惯墀眚篪”,打开用例编辑页添加动作栏中,选择中继器下数据集中的“添加行”,配置动作栏中勾选我们创建的中继器元件点击配置动作栏的“添加行”,打开添加行到中继器编辑窗点击name列的“fx”,点击“添加局部变量”,元件选择“name(文本框)”点击“插入变量或函数”,选择刚刚创建的局部变量“LVAR1”确定后回到添加行到中继器编辑窗同样的方法对type、quantity列进行操作,注意局部变量名不要重复用例编辑好后,F5运行测试一下,此时已实现了新增功能

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

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

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

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

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

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

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

10、实现删除商品功能:双击中继器,进去中继器编辑页用按钮元竭惮蚕斗件,在中继器页面中做一个“删除”按钮,元件命名为高酿眚郁“delete”选中删除按钮,右侧功能栏双击“鼠标单击时”,打开用例编辑页添加动作栏中,选择中继器下数据集中的“删除行”,配置动作栏中勾选我们创建的中继器元件,单选“this”确定完成用例,F5运行测试一下,此时已实现了删除功能

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

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

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

11、实现删除全部商品功能:切换页面到“index”,用按钮元件水貔藻疽,做一个“全部删除”按钮,元件命名为“deleteall”2斤舻浑趸、选中全部删除按钮,右侧功能栏双击“鼠标单击时”,打开用例编辑页添加动作栏中,选择中继器下数据集中的“删除行”,配置动作栏中勾选我们创建的中继器元件,条件填写“true”,即中继器中有值的都删除确定完成用例,F5运行测试一下,此时已实现了全部删除功能

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

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

12、利用中继器实现商品的新增、删除、全部删除功能,都完成后,可以对页面进行一定的美化,设计一下UI。这里我做了一个简单的UI,可以进去看一下功能跟效果:https://5d9ew4.axshare.com/#c=2Axure源文件百度网盘地址:https://pan.baidu.com/s/1VsatX88QG2GBfm2i-k9GoQ密码:zy8g

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

© 一点知识