完整word版使用Axure实现电商产品列表复杂原型Word文件下载.docx

完整word版使用Axure实现电商产品列表复杂原型Word文件下载.docx

《完整word版使用Axure实现电商产品列表复杂原型Word文件下载.docx》由会员分享，可在线阅读，更多相关《完整word版使用Axure实现电商产品列表复杂原型Word文件下载.docx（16页珍藏版）》请在冰豆网上搜索。

产品页面搭建

本案例中产品列表是由中继器元件搭建的，中继器的使用方法与动态面板略有不同。

中继器是数据集，是对数据库的模拟，先制作数据排版结构，然后插入数据即可将想要的效果表现出来，并不需要依次制作所有的数据展示模块，如图4.2所示。

图4.2　中继器的数据排版结构

向页操作区拖入中继器元件，在右侧的属性栏中增加了一项中继器独有的“每项加载时”事件及中继器数据表，如图4.3所示。

图4.3中继器的独有事件

双击进入中继器面板，此时面板中只有一个矩形元件（无用途，直接删去），如图4.4所示。

图4.4中继器内部样式

向面板中添加所需要的元件（文本元件设置为“只读”）。

由上向下命名为name、price、Pro、img。

其中，name、price为单行文本元件（单行文本元件不能对文本进行换行），Pro为多行文本元件，如图4.5所示。

图4.5中继器中的排版样式

在软件右侧的中继器数据表中新增列，并为新增列命名（中继器中的列名不可以使用中文字符，否则会使设置无效），同时填入所需的数据值，如图4.6所示。

图4.6列名及数据

其中，img列的图片采用右击导入方式实现，如图4.7所示。

图4.7图片的导入

数据插入完成后，为中继器添加“每项加载时”事件。

设置文本，选中“name（文本框）”复选框，设置文本框的值为Item.name。

设置文本，选中“price（文本框）”复选框，设置文本框的值为Item.price。

设置文本，选中“Pro（文本框）”复选框，设置文本框的值为Item.Pro。

设置图片，选中“pic（图片）”复选框，设置Default值为Iitem.img（注：

Item函数返回指定集中的元组），如图4.8所示。

图4.8设置加载时事件

文本值的设置方法：

以“name（文本框）”为例。

单击

图标，弹出“编辑文本”对话框。

单击“插入变量或函数”，单击“中继器/数据集”，选择Item.name。

单击“确定”按钮，完成文字值的设置，如图4.9所示。

图4.9文字值函数的设置

文本值设定后对各项数据的页面总体排列样式进行设置，主要是对布局、是否分页、间距进行设置，如图4.10所示。

图4.10样式设置

设置完成后即可在页面中看到产品列表效果，如图4.11所示。

图4.11数据的页面展示样式

步骤2：

产品的新增

制作数据输入的文本输入框，分别命名为z_name、z_price、z_pro、z_img，选中4个输入框和对应文本，右击转换为动态面板，命名为“数据”，设置为隐藏。

制作“新增”按钮，右击转换为动态面板，命名为“新增”。

添加状态2，制作同样式的按钮“保存”。

新增模块的样式如图4.12所示。

图4.12数据新增的样式

设置交互事件。

在录入商品信息时，名称和价格不能为空。

设置文本提示，命名为“提示1”。

将提示内容“产品名称和价格不能为空”设置为隐藏。

添加名称文本框的失去焦点时事件，设置判断条件为“如果文字元件为空时”，设置新态面板“增动”中按钮“保存”的状态为“禁用”。

显示提示，等待1000毫秒，隐藏提示，设置动态面板“新增”中按钮“保存”的状态为“启动”，如图4.13所示（价格文本框的设置方法与此相同）。

图4.13文本元件为空时的设置

图片文本框的设置。

在属性栏中将图片文本框的类型设置为文件。

设置动态面板“新增”的交互事件。

为状态1中的按钮“新增”添加鼠标单击时事件，显示动态面板“数据”，设置动态面板“新增”的状态为状态2，如图4.14所示。

图4.14按钮“新增”的状态设置

为状态2中的按钮“保存”设置鼠标单击时事件。

如果文本元件z_name与z_price为空，禁用动态面板“新增”中的按钮“保存”。

显示提示文字，等待1000毫秒，隐藏提示文字，启用动态面板“新增”中的按钮“保存”，如图4.15所示。

图4.15文本元件为空时的设置

如果文本元件z_name与z_price都不为空，设置添加行1为中继器，隐藏动态面板“数据”。

设置动态面板“新增”为状态1，如图4.16所示。

图4.16文字元件都不为空时的设置

其中，添加行1为中继器的设置如图4.17所示。

单击“中继器>

数据集>

添加行”选中“（中继器）”复选框。

单击“添加行”按钮，弹出“添加行到中继器”对话框。

单击

弹出变量“编辑值”对话框。

添加局部变量LVAR1，为文字元件z_name的值。

插入局部变量LVAR1，单击“确定”按钮。

图4.17文本变量的添加

Price列与Pro列的添加方式同name列，为img列选择导入图片，单击“确定”按钮完成添加。

最终效果，如图4.18所示。

图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”，如图4.20所示。

图4.20当文字元件price_n为空时“保存”按钮的设置

如果文字元件price_n不为空，标记行，选中中继器复选框，选中This单选按钮。

更新行，选中中继器复选框，选中“已标记”单选按钮，选择列price，Value函数设为局部变量“LVAR1”（声明局部变量LVAR1为文本元件price_n）。

更新行，选中中继器复选框，选中“已标记”单选按钮，选择列pro，Value函数设为局部变量“LVAR1”（声明局部变量LVAR1为文本元件pro_n）。

取消标记，选中“中继器”复选框，选中This单选按钮。

设置动态面板“修改”的状态为状态1，如图4.21所示。

图4.21当文字元件price_n不为空时“保存”按钮的设置

为动态面板“修改”状态2中的“取消”按钮添加鼠标单击时事件：

设置文本元件pro_n与price_n为隐藏，设置动态面板“修改”为状态1，如图4.22所示。

图4.22单击“取消”按钮时的交互设置

最终效果图如图4.23所示。

图4.23修改功能最终效果

步骤4：

产品信息的删除

在中继器页面右下角添加删除按钮，设置鼠标单击时交互事件：

删除行，选中“中继器”复选框，选择“This”单选按钮，如图4.24所示。

图4.24删除按钮的交互设置

步骤5：

产品信息的查询

在产品列表右上部应用文本元件制作文本输入框“查找”（提示内容为：

请输入产品名称）和按钮“搜索”。

设置“搜索”按钮的单击交互事件：

如文本元件“查找”不为空时，如图4.25所示。

图4.25文本元件“查找”不为空

添加筛选，选中中继器和移除其他筛选复选框，设置名称为“产品”，设置条件为：

中继器中的产品名与查找框中的文字相同，如图4.26所示。

图4.26查找框不为空时搜索”按钮“的交互设置

设置条件：

如文本元件“查找”为空时。

设置交互为移除筛选，选中“中继器”和“移除全部筛选”复选框，如图4.27所示。

图4.27查找框为空时“搜索”按钮的交互设置

通过步骤5的设置即可完成查找功能的实现。

步骤6：

产品信息的排序

制作两个按钮：

默认排序，价格从低到高。

将“价格从低到高”按钮转化为动态面板，命名为“排序”，双击动态面板，添加状态2，再添加按钮“价格从高到低”到状态2。

设置“默认排序”按钮的鼠标单击时事件，移除筛选，选中“中继器”和“移除全部排序”复选框，如图4.28所示。

图4.28按钮“默认排序”的交互设置

进入动态面板“排序”状态1页面，设置“价格从高到低”按钮的鼠标单击事件为：

添加排序，选中“中继器”复选框，设置名称为“降序排列”，属性为price，排序类型为Number，顺序为“降序”。

设置动态面板“排序”的状态为“状态2”，如图4.29所示。

图4.29“价格从高到低”按钮的交互事件

进入动态面板“排序”的状态2页面，设置“价格从低到高”按钮的鼠标单击事件为：

添加排序，选中“中继器”复选框，设置名称为“升序”，属性为price，排序类型为Number，顺序为“升序”。

设置动态面板“排序”的状态为“状态1”，如图4.30所示。

图4.30“价格从低到高”按钮的交互事件

步骤7：

产品信息的翻页

制作两个按钮“上一页”和“下一页”。

为“上一页”按钮添加鼠标单击时事件：

设置当前显示页面，选中“中继器”复选框，选择页面为Previous（Previous翻译为“以前的”），如图4.31所示。

图4.31“上一页”按钮的交互

为“下一页”按钮添加鼠标单击时事件：

设置当前显示页面，选中“中继器”复选框，选择页面为Next（Next翻译为“下一个”），如图4.32所示。

图4.32“下一页”按钮的交互

通过本案例制作，讲解了中继器的功能和应用。

要注意中继器使用时，列名不是直接显示的，需要其他元件来实现。

中继器有一个默认的行序号索引项，只需要增加一列序号列，绑定信息函数[[item.index]]，就可自动给每一行添加序号。