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

1、产品页面搭建本案例中产品列表是由中继器元件搭建的，中继器的使用方法与动态面板略有不同。中继器是数据集，是对数据库的模拟，先制作数据排版结构，然后插入数据即可将想要的效果表现出来，并不需要依次制作所有的数据展示模块，如图4.2所示。图4.2中继器的数据排版结构向页操作区拖入中继器元件，在右侧的属性栏中增加了一项中继器独有的“每项加载时”事件及中继器数据表，如图4.3所示。图4.3中继器的独有事件双击进入中继器面板，此时面板中只有一个矩形元件（无用途，直接删去），如图4.4所示。图4.4中继器内部样式向面板中添加所需要的元件（文本元件设置为“只读”）。由上向下命名为name、price、Pro、i

2、mg。其中，name、price为单行文本元件（单行文本元件不能对文本进行换行），Pro为多行文本元件，如图4.5所示。图4.5中继器中的排版样式在软件右侧的中继器数据表中新增列，并为新增列命名（中继器中的列名不可以使用中文字符，否则会使设置无效），同时填入所需的数据值，如图4.6所示。图4.6列名及数据其中，img列的图片采用右击导入方式实现，如图4.7所示。图4.7图片的导入数据插入完成后，为中继器添加“每项加载时”事件。设置文本，选中“name（文本框）”复选框，设置文本框的值为Item.name。设置文本，选中“price（文本框）” 复选框，设置文本框的值为Item.price。设置

3、文本，选中“Pro（文本框）” 复选框，设置文本框的值为Item.Pro。设置图片，选中“pic（图片）” 复选框，设置Default值为Iitem.img（注：Item函数返回指定集中的元组），如图4.8所示。图4.8设置加载时事件文本值的设置方法：以“name（文本框）”为例。单击 图标，弹出“编辑文本”对话框。单击 “插入变量或函数”，单击“中继器/数据集”，选择 Item.name。单击 “确定”按钮，完成文字值的设置，如图4.9所示。图4.9文字值函数的设置文本值设定后对各项数据的页面总体排列样式进行设置，主要是对布局、是否分页、间距进行设置，如图4.10所示。图4.10样式设置设置

4、完成后即可在页面中看到产品列表效果，如图4.11所示。图4.11数据的页面展示样式步骤2：产品的新增制作数据输入的文本输入框，分别命名为z_name、z_price、z_pro、z_img，选中4个输入框和对应文本，右击转换为动态面板，命名为 “数据”，设置为隐藏。制作“新增”按钮，右击转换为动态面板，命名为“新增”。添加状态2，制作同样式的按钮“保存”。新增模块的样式如图4.12所示。图4.12数据新增的样式设置交互事件。在录入商品信息时，名称和价格不能为空。设置文本提示，命名为“提示1”。将提示内容“产品名称和价格不能为空”设置为隐藏。添加名称文本框的失去焦点时事件，设置判断条件为“如果文

5、字元件为空时”，设置新态面板“增动”中按钮“保存”的状态为“禁用”。显示提示，等待1000毫秒，隐藏提示，设置动态面板“新增”中按钮“保存”的状态为“启动”，如图4.13所示（价格文本框的设置方法与此相同）。图4.13文本元件为空时的设置图片文本框的设置。在属性栏中将图片文本框的类型设置为文件。设置动态面板“新增”的交互事件。为状态1中的按钮“新增”添加鼠标单击时事件，显示动态面板“数据”，设置动态面板“新增”的状态为状态2，如图4.14所示。图4.14按钮“新增”的状态设置为状态2中的按钮“保存”设置鼠标单击时事件。如果文本元件z_name与z_price为空，禁用动态面板“新增”中的按钮“

6、保存”。显示提示文字，等待1000毫秒，隐藏提示文字，启用动态面板“新增”中的按钮“保存”，如图4.15所示。图4.15文本元件为空时的设置如果文本元件z_name与z_price都不为空，设置添加行1为中继器，隐藏动态面板“数据”。设置动态面板“新增”为状态1，如图4.16所示。图4.16文字元件都不为空时的设置其中，添加行1为中继器的设置如图4.17所示。单击“中继器数据集添加行”选中“（中继器）”复选框。单击“添加行”按钮，弹出“添加行到中继器”对话框。单击弹出变量“编辑值”对话框。添加局部变量LVAR1，为文字元件z_name的值。插入局部变量LVAR1，单击“确定”按钮。图4.17文

7、本变量的添加Price列与Pro列的添加方式同name列，为img列选择导入图片，单击 “确定”按钮完成添加。最终效果，如图4.18所示。图4.18 数据添加的最终效果步骤3：产品信息的修改在中继器内部添加单行文字元作为新价格输入框，命名为price_n。添加多行文字元件作为商品简介输入框，命名为pro_n。添加单行文字作为提示语，元件命名为提示2，文字内容为“商品价格必填，不能为空”。添加一个按钮，转换为动态面板，命名为“修改”（页面效果如图4.19所示）。双击动态面板“修改”，新增状态2，进入状态2，添加两个按钮：保存，取消。图4.19修改界面制作。设置文本元件price_n、pro_n、

8、提示2为隐藏。为动态面板“修改”状态1中的“修改”按钮添加鼠标单击时事件：显示文本元件price_n与pro_n，设置动态面板“修改”的状态为状态2。为动态面板“修改”状态2中的“保存”按钮添加鼠标单击时事件：如果文字元件price_n的值为空，设置动态面板“修改”中“保存”按钮为禁用状态。显示文本元件“提示2”，等待1000毫秒，隐藏文本元件“提示2”，设置动态面板“修改”中“保存”按钮的状态为启用，隐藏文本元件“提示2”，如图4.20所示。图4.20当文字元件price_n为空时“保存”按钮的设置如果文字元件price_n不为空，标记行，选中中继器复选框，选中This单选按钮。更新行，选中

9、中继器复选框，选中“已标记”单选按钮，选择列 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为隐藏，设置动态面板“修改”为状

10、态1，如图4.22所示。图4.22单击 “取消”按钮时的交互设置最终效果图如图4.23所示。图4.23修改功能最终效果步骤4：产品信息的删除在中继器页面右下角添加删除按钮，设置鼠标单击时交互事件：删除行，选中“中继器”复选框，选择“This”单选按钮，如图4.24所示。图4.24删除按钮的交互设置步骤5：产品信息的查询在产品列表右上部应用文本元件制作文本输入框“查找”（提示内容为：请输入产品名称）和按钮“搜索”。设置“搜索”按钮的单击交互事件：如文本元件“查找”不为空时，如图4.25所示。图4.25文本元件“查找”不为空添加筛选，选中中继器和移除其他筛选复选框，设置名称为“产品”，设置条件为：

11、中继器中的产品名与查找框中的文字相同，如图4.26所示。图4.26查找框不为空时搜索”按钮“的交互设置设置条件：如文本元件“查找”为空时。设置交互为移除筛选，选中“中继器”和“移除全部筛选”复选框，如图4.27所示。图4.27查找框为空时“搜索”按钮的交互设置通过步骤5的设置即可完成查找功能的实现。步骤6：产品信息的排序制作两个按钮：默认排序，价格从低到高。将“价格从低到高”按钮转化为动态面板，命名为“排序”，双击动态面板，添加状态2，再添加按钮“价格从高到低”到状态2。设置“默认排序”按钮的鼠标单击时事件，移除筛选，选中“中继器”和“移除全部排序”复选框，如图4.28所示。图4.28按钮“默

12、认排序”的交互设置进入动态面板“排序”状态1页面，设置“价格从高到低”按钮的鼠标单击事件为：添加排序，选中“中继器”复选框，设置名称为“降序排列”，属性为price，排序类型为Number，顺序为“降序”。设置动态面板“排序”的状态为“状态2”，如图4.29所示。图4.29 “价格从高到低”按钮的交互事件进入动态面板“排序”的状态2页面，设置“价格从低到高”按钮的鼠标单击事件为：添加排序，选中“中继器”复选框，设置名称为“升序”，属性为price，排序类型为Number，顺序为“升序”。设置动态面板“排序”的状态为“状态1”，如图4.30所示。图4.30 “价格从低到高”按钮的交互事件步骤7：

13、产品信息的翻页制作两个按钮“上一页”和“下一页”。为“上一页”按钮添加鼠标单击时事件：设置当前显示页面，选中“中继器”复选框，选择页面为Previous（Previous翻译为“以前的”），如图4.31所示。图4.31“上一页”按钮的交互为“下一页”按钮添加鼠标单击时事件：设置当前显示页面，选中“中继器”复选框，选择页面为Next（Next翻译为“下一个”），如图4.32所示。图4.32 “下一页”按钮的交互通过本案例制作，讲解了中继器的功能和应用。要注意中继器使用时，列名不是直接显示的，需要其他元件来实现。中继器有一个默认的行序号索引项，只需要增加一列序号列，绑定信息函数 item.index，就可自动给每一行添加序号。