文档介绍：该【使用Axure实现电商产品列表复杂原型 】是由【海洋里徜徉知识】上传分享，文档一共【17】页，该文档可以免费在线阅读，需要了解更多关于【使用Axure实现电商产品列表复杂原型 】的内容，可以使用淘豆网的站内搜索功能，选择自己适合的文档，以下文字是截取该文章内的部分文字，如需要获得完整电子版，请下载此文档到您的设备，方便您编辑和打印。(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
使用Axure实现电商产品列表复杂原型
在原型图制作中,，搜索查找时的模糊匹配，管理平台中商品的添加与删除,。0之前需要实现这些功能十分复杂，，该元件功能强大,是一个数集的容器，中继器一共有11个动作，其中包括6个中继器动作和5个数据集动作,在原型制作中可以导入图片和数据，在交互上它可以实现新增行、删除行、标记行、排序，筛选等。配合函数使用，中继器可以实现的高级交互效果更多。
产品列表案例
完成效果
本案例最终可以实现对商品列表进行增删改查的操作，也可以进行排序,页面效果如图4。1所示。
图4。1 产品列表
技能分析
中继器与条件判断的结合。
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
案例实现
实现步骤与讲解
步骤1:产品页面搭建
本案例中产品列表是由中继器元件搭建的，中继器的使用方法与动态面板略有不同。中继器是数据集，是对数据库的模拟，先制作数据排版结构，然后插入数据即可将想要的效果表现出来，并不需要依次制作所有的数据展示模块，。
图4。2 中继器的数据排版结构
向页操作区拖入中继器元件，在右侧的属性栏中增加了一项中继器独有的“每项加载时"事件及中继器数据表，。
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
图4。3中继器的独有事件
双击进入中继器面板,此时面板中只有一个矩形元件（无用途，直接删去），。
图4。4中继器内部样式
向面板中添加所需要的元件（文本元件设置为“只读”)。由上向下命名为name、price、Pro、img。其中,name、price为单行文本元件（单行文本元件不能对文本进行换行），Pro为多行文本元件，如图4。5所示.
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
图4。5中继器中的排版样式
在软件右侧的中继器数据表中新增列，并为新增列命名（中继器中的列名不可以使用中文字符，否则会使设置无效)，同时填入所需的数据值，。
其中，img列的图片采用右击导入方式实现,。
图4。7图片的导入
数据插入完成后,为中继器添加“每项加载时"事件。设置文本，选中“name（文本框）”复选框，。设置文本，选中“price（文本框）" 复选框，设置文本框的值为Item。price。设置文本，选中“Pro（文本框）” 复选框,设置文本框的值为Item。，选中“pic（图片）" 复选框，设置Default值为Iitem。img（注：Item函数返回指定集中的元组），如图4。8所示。
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
图4。8设置加载时事件
文本值的设置方法：以“name（文本框)”为例。单击 图标,弹出“编辑文本” “插入变量或函数”，单击“中继器/数据集"，选择 。单击 “确定”按钮，完成文字值的设置，。
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
文本值设定后对各项数据的页面总体排列样式进行设置，主要是对布局、是否分页、间距进行设置，。
图4。10样式设置
设置完成后即可在页面中看到产品列表效果，如图4。11所示。
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
图4。11数据的页面展示样式
步骤2:产品的新增
制作数据输入的文本输入框，分别命名为z_name、z_price、z_pro、z_img，选中4个输入框和对应文本，右击转换为动态面板,命名为 “数据”，设置为隐藏。制作“新增”按钮，右击转换为动态面板，命名为“新增"。添加状态2，制作同样式的按钮“保存”。。
图4。12数据新增的样式
设置交互事件。在录入商品信息时，名称和价格不能为空。
设置文本提示，命名为“提示1”。将提示内容“产品名称和价格不能为空”设置为隐藏.
添加名称文本框的失去焦点时事件，设置判断条件为“如果文字元件为空时"，设置新态面板“增动"中按钮“保存"的状态为“禁用”.显示提示，等待1000毫秒,隐藏提示,设置动态面板“新增"中按钮“保存”的状态为“启动"，(价格文本框的设置方法与此相同）。
图4。13文本元件为空时的设置
图片文本框的设置。在属性栏中将图片文本框的类型设置为文件.
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
设置动态面板“新增”的交互事件。为状态1中的按钮“新增”添加鼠标单击时事件，显示动态面板“数据",设置动态面板“新增”的状态为状态2，如图4。14所示。
“新增”的状态设置
为状态2中的按钮“保存”设置鼠标单击时事件。如果文本元件z_name与z_price为空，禁用动态面板“新增”中的按钮“保存”。显示提示文字，等待1000毫秒，隐藏提示文字,启用动态面板“新增”中的按钮“保存”,如图4。15所示。
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
如果文本元件z_name与z_price都不为空,设置添加行1为中继器，隐藏动态面板“数据"。设置动态面板“新增”为状态1，如图4。16所示。
图4。16文字元件都不为空时的设置
其中，添加行1为中继器的设置如图4。17所示。单击“中继器>数据集〉添加行”选中“（中继器）”复选框。单击“添加行"按钮，弹出“添加行到中继器”对话框。单击弹出变量“编辑值"对话框。添加局部变量LVAR1，为文字元件z_name的值。插入局部变量LVAR1，单击“确定”按钮。
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
(完整word版)使用Axure实现电商产品列表复杂原型
Price列与Pro列的添加方式同name列,为img列选择导入图片,单击 “确定”按钮完成添加。最终效果，.
图4。18 数据添加的最终效果
步骤3：产品信息的修改
在中继器内部添加单行文字元作为新价格输入框，命名为price_n。添加多行文字元件作为商品简介输入框，命名为pro_n。添加单行文字作为提示语,元件命名为提示2，文字内容为“商品价格必填，不能为空”。添加一个按钮，转换为动态面板，命名为“修改”（页面效果如图4。19所示）。双击动态面板“修改”,新增状态2，进入状态2,添加两个按钮：保存，取消。
图4。19修改界面制作。
设置文本元件price_n、pro_n、提示2为隐藏.
为动态面板“修改”状态1中的“修改"按钮添加鼠标单击时事件:显示文本元件price_n与pro_n，设置动态面板“修改"的状态为状态2。
为动态面板“修改"状态2中的“保存"按钮添加鼠标单击时事件：如果文字元件price_n的值为空，设置动态面板“修改”中“保存”“提示2"，等待1000毫秒，隐藏文本元件“提示2”，设置动态面板“修改”中“保存”按钮的状态为启用,隐藏文本元件“提示2”，.