案例16. 中继器：制作商品列表
百度外卖-菜单
案例效果：
商品列表：（图1-125）
案例描述：
包含商品图片、名称、推荐人数、销售数量、价格以及添加按钮的商品模块列表。
元件准备：
页面中：（图1-126）
中继器“GoodsList”中：
包含命名：
中继器（用于商品列表）：GoodsList
文本标签（显示商品名称）：GoodsName
文本标签（显示推荐人数）：GoodsRecommend
文本标签（显示商品销量）：GoodsSales
文本标签（显示商品价格）：GoodsPrice
图片（显示商品图片）：GoodsImage
思路分析：
中继器可用来实现重复的项目列表。可以将自身数据集中的数据通过项目交互与编辑好的元件模板进行绑定；并且，可以调整列表的布局、间距等；
中继器的操作分为以下几步：
在中继器的编辑区中，拖入元件创建单个项目的模板；（操作步骤1）
添加列表的数据、图片到数据集中；（操作步骤2~3）
添加交互将数据集中的数据关联到相应的元件；（操作步骤4~8）
设置中继器的排列布局与间隔。（操作步骤9）
操作步骤：
1、参考元件准备中的图1-127拖入元件创建模板，并进行命名；
2、打开本案例素材中的Excel数据表格，复制里面的数据；接下来，回到Axure中，双击中继器“GoodsList”，在检视面板中打开数据集，点中数据集的首行首列，按下快捷键&Ctrl+V&,粘贴数据到数据集中；然后，对应模板中的元件名称为中继器数据集的每一列设置名称；(图1-128)
3、在“GoodsImage”列中，点击&鼠标右键&,在菜单中选择【导入图片】，对应每行数据将图片导入到数据集中；（图1-129）
4、在检视面板中，打开交互界面，在【每项加载时】事件中添加“用例1”,设置动作为【设置文本】“GoodsName”为【值】“[[Item.GoodsName]]”；
用例动作设置：（图1-130）
“[[Item.GoodsName]]”可以直接输入，也可以通过点击【fx】图标，在弹出的编辑界面中，点击【插入变量或函数…】，然后，在打开的列表中选取，插入到值的输入框中；
编辑文本设置：（图1-131）
5、继续上一步，【设置文本】“GoodsPrice”为【值】“￥[[Item.GoodsPrice]]”；（参考操作步骤4）
6、继续上一步，【设置文本】“GoodsRecommend”为【值】“[[Item. GoodsRecommend]]人推荐”；（参考操作步骤4）
7、继续上一步，【设置文本】“GoodsSales”为【值】“已售[[Item. GoodsSales]]份”；（参考操作步骤4）
用例动作设置：（图1-132）
8、继续上一步，【设置图片】“GoodsImage”为【值】“[[Item.GoodsImage]]”。
用例动作设置：（图1-133）
9、在检视面板中，打开样式界面，设置{布局}为【水平】布局，并勾选【网格排布】，设置{每行项目数}为“2”；然后，设置{间距}为{行}“15”{列}“30”。（图1-134）
补充说明：
从Excel中复制数据到数据集，最后一行会多出一个空行，删除即可。
特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。
~~~~~~~~~~~~
~~~~~~~~~~~~
小楼老师再出新作，倾力打造Axure RP 8精品课程系列，以最短的时间高效完成学习目标，入门进阶与实战案例并重，是0基础的新手从入门到精通的必备课程。
《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------
转载请注明： &
or分享 (0)注册 | 登录
从零开始学运营，10年经验运营总监亲授，2天线下集训+1年在线学习，做个有竞争力的运营人。
一直都是只看不发的那种，运用axure制作原型也有很长一段时间了，最近升级到8.0，用起来各种顺手啊，就写了一个中继器的教程，供新手学习。
原型主要是通过中继器实现表格的增删改操作，示例如下：
1 开工前的原件准备工作
文本框矩形框数个、下拉框一个、按钮两个、中继器一个。建议做好原件命名，因为之后会涉及到蛮多的交互，清晰的命名可以避免出现混乱。
然后我们需要对中继器做一些处理，点击中继器，右侧它的属性页，可以把三个行都删除，然后双击中继器进入中继器编辑页面。
按照表格每一列的名称在中继器内放入6个矩形框，做好元件命名。
现在是这个样子的。
2 数据添加功能
准备工作完成，然后我们需要为中继器添加一下动作，中继器属性面板选择每项载入时，当打开网页或者添加数据时候，为中继器加载数据集到元件。
特别注意的是，为了实现编号自增，编号的动作设置为[[item.index]]
中继器属性面板为中继器数据集添加列，也可以手动添加一行数据，如果是7.0的版本你的中继器数据集应该再页面下方，8.0整合到右侧
之后需要为添加按钮配置点击动作，为中继器“添加行”
点击下方的 添加行 ，把输入框和中继器数据集绑定起来：
到此，添加功能已经完成。
3 单行选择+删除行
进入中继器页面，选中6个矩形框，设置选中的动作—填充颜色
同样是选中6个矩形框的状态，按 ctrl+g，将6个矩形设为选项组，别忘了添加一个选项组名称（很重要），添加鼠标点击动作，
标记行是稍后的删除动作需要用到的，现在已经可以选择行，但是没有单选效果，回到中继器属性
中间的勾去掉即可。
下面为“删除行”按钮配置动作
此处非常简单，只需要为中继器删除行选择已标记即可，我们上一步标记行的意义就在于此。
点击修改按钮，改行变为可编辑状态，同时修改按钮变成保存按钮，点击保存之后保存修改后的数据。
中继器修改框拖入两个文本矩形，一个修改（xiugai）一个保存（baocun），默认保存文本为隐藏状态。
Xingming、xingbie、zhiwei、youxiang四个矩形框分别拖入一个文本输入框，命名为”xiugai-xingming、xiugai-xingbie、xiugai-zhiwei、xiugai-youxiang“去掉边框设为隐藏状态。
然后为修改按钮配置动作：
点击修改按钮，显示隐藏文本输入框，同时文本输入框获取当前行的值。
然后为保存按钮配置动作，点击保存时中继器更新行，同时中继器数据集应该设置为刚刚的隐藏文本框，这里与之前添加按钮的配置基本一样
至此，一个简单的利用中继器增删改的原型设计完成。
但是在预览原型的时候会发现一些问题：
添加数据的时候性别不选择，或者输入为空也可以添加成功，修改行的时候也有同样的问题，而且性别的位置可以随意输入没有任何限制。
我上传的原型中是有一些限制的，这里就不放出具体教程了，有不明白的可以咨询。头一次写，会有一些不清晰的地方，欢迎建议指正！
rp文件地址：http://pan.baidu.com/s/1pL2dW63
本文由 @零零 原创发布于人人都是产品经理。未经许可，禁止转载。
赞赏是对原创者的最大认可
赞赏6人打赏
收藏已收藏 | 161赞已赞 | 71
产品经理群
运营交流群
数据分析群
文案交流群
Axure交流群
关注微信公众号
大家都在问
8个回答13人关注
13个回答11人关注
17个回答18人关注
10个回答10人关注
46个回答69人关注
14个回答22人关注拒绝访问 | www.ggdoc.com | 百度云加速
请打开cookies.
此网站 (www.ggdoc.com) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(418adf11bf1343dd-ua98).
重新安装浏览器，或使用别的浏览器案例17. 中继器：商品列表排序
美丽说-宝贝搜索
案例效果：
默认：（图1-135）
价格从低到高：（图1-136）
价格从高到低：（图1-137）
案例描述：
鼠标移入“价格排序”按钮，显示选项列表。选项在鼠标进入时显示粉色文字，点击选项，商品列表进行相应的排序。
元件准备：
页面中：（图1-138）
动态面板“SortPanel”中： （图1-139）
中继器“GoodsList”中：（图1-140）
中继器“GoodsList”的数据集中：（图1-141）
包含命名：
中继器（用于商品列表）：GoodsList
动态面板（用于排序选项）：SortPanel
图片（显示商品图片）：GoodsImage
图片（显示商品类型）：GoodsTypeImage
文本标签（显示商品名称）：GoodsName
文本标签（显示商品销量）：GoodsSales
文本标签（显示商品价格）：GoodsPrice
思路分析：
完成中继器数据集与元件的关联；（操作步骤1）
并设定好模块的排布与间隔；（操作步骤2）
鼠标移入“价格排序”按钮，需要显示排序的选项，并能够在鼠标移出选项时自动隐藏选项；（操作步骤3）
为每个排序选项添加鼠标移入时的样式；（操作步骤4）
点击每个排序选项时，需要中继器进行相应的排序，并隐藏排序的选项列表。（操作步骤5~6）
操作步骤：
1、为中继器的【每项加载时】事件添加“用例1”，设置商品的名称、价格、销量、图片和类型图标与模板中的元件关联；（参考图1-132）
事件交互设置：（图1-142）
2、在中继器的样式中设置{布局}为【水平】布局，【网格排布】中设置【每排项目数】为“4”；（参考图1-134）
3、为“价格排序”按钮的【鼠标移入时】事件添加“用例1”，设置动作为【显示】动态面板“SortPanel”，在设置的{更多选项}中选择【弹出效果】；设置为“弹出效果”后，显示出来的动态面板就会在鼠标移出时自动隐藏，而无需再添加交互；
用例动作设置：（图1-143）
4、在元件属性中为排序选项元件设置【鼠标悬停】的交互样式，文字颜色为粉红色；
5、双击动态面板“SortPanel”打开动态面板状态管理界面；再双击状态名称“State1”打开状态内容编辑区；在编辑区中为排序选项“价格从低到高”的【鼠标单击时】事件添加“用例1”，设置动作为【添加排序】到中继器“GoodsList”，排序{名称}为“SortPrice”，排序的{属性}为商品价格“GoodsPrice”，{排序类型}为数字类型“Number”，排序{顺序}选择【升序】排列；
用例动作设置：（图1-144）
6、继续上一步添加动作【隐藏】动态面板“SortPanel”；
用例动作设置：（图1-145）
7、参考操作步骤5~6，为排序选项“价格从高到低”的设置交互，不同之处只是排序交互中{顺序}为【降序】排列。
事件交互设置：（图1-146）
补充说明：
本案例中使用了“FontAwesome4.4.0”图标字体元件库，需要安装字体文件支持，并进行Web字体设置。（参考案例1的补充说明）
特别提醒：本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。
~~~~~~~~~~~~
~~~~~~~~~~~~
小楼老师再出新作，倾力打造Axure RP 8精品课程系列，以最短的时间高效完成学习目标，入门进阶与实战案例并重，是0基础的新手从入门到精通的必备课程。
《AxureRP 8 入门与实战》系列视频------从零入门进阶的最佳课程------
转载请注明： &
or分享 (0)发送私信成功
满足所有需求，助您轻松工作
Axure8.0教程：利用中继器对表格的增删改操作
10:45 && 浏览量（1917） &&
一直都是只看不发的那种，运用axure制作原型也有很长一段时间了，最近升级到8.0，用起来各种顺手啊，就写了一个中继器的教程，供新手学习。
原型主要是通过中继器实现表格的增删改操作，示例如下：
1 开工前的原件准备工作
文本框矩形框数个、下拉框一个、按钮两个、中继器一个。建议做好原件命名，因为之后会涉及到蛮多的交互，清晰的命名可以避免出现混乱。
然后我们需要对中继器做一些处理，点击中继器，右侧它的属性页，可以把三个行都删除，然后双击中继器进入中继器编辑页面。
按照表格每一列的名称在中继器内放入6个矩形框，做好元件命名。
现在是这个样子的。
2 数据添加功能
准备工作完成，然后我们需要为中继器添加一下动作，中继器属性面板选择每项载入时，当打开网页或者添加数据时候，为中继器加载数据集到元件。
特别注意的是，为了实现编号自增，编号的动作设置为[[item.index]]
中继器属性面板为中继器数据集添加列，也可以手动添加一行数据，如果是7.0的版本你的中继器数据集应该再页面下方，8.0整合到右侧
之后需要为添加按钮配置点击动作，为中继器“添加行”
点击下方的 添加行 ，把输入框和中继器数据集绑定起来：
到此，添加功能已经完成。
3 单行选择+删除行
进入中继器页面，选中6个矩形框，设置选中的动作—填充颜色
同样是选中6个矩形框的状态，按 ctrl+g，将6个矩形设为选项组，别忘了添加一个选项组名称(很重要)，添加鼠标点击动作，
标记行是稍后的删除动作需要用到的，现在已经可以选择行，但是没有单选效果，回到中继器属性
中间的勾去掉即可。
下面为“删除行”按钮配置动作
此处非常简单，只需要为中继器删除行选择已标记即可，我们上一步标记行的意义就在于此。
点击修改按钮，改行变为可编辑状态，同时修改按钮变成保存按钮，点击保存之后保存修改后的数据。
中继器修改框拖入两个文本矩形，一个修改(xiugai)一个保存(baocun)，默认保存文本为隐藏状态。
Xingming、xingbie、zhiwei、youxiang四个矩形框分别拖入一个文本输入框，命名为”xiugai-xingming、xiugai-xingbie、xiugai-zhiwei、xiugai-youxiang“去掉边框设为隐藏状态。
然后为修改按钮配置动作：
点击修改按钮，显示隐藏文本输入框，同时文本输入框获取当前行的值。
然后为保存按钮配置动作，点击保存时中继器更新行，同时中继器数据集应该设置为刚刚的隐藏文本框，这里与之前添加按钮的配置基本一样
至此，一个简单的利用中继器增删改的原型设计完成。
但是在预览原型的时候会发现一些问题：
添加数据的时候性别不选择，或者输入为空也可以添加成功，修改行的时候也有同样的问题，而且性别的位置可以随意输入没有任何限制。
我上传的原型中是有一些限制的，这里就不放出具体教程了，有不明白的可以咨询。头一次写，会有一些不清晰的地方，欢迎建议指正!
原型地址：
& 收藏(2) 收藏 +1 已收藏 取消
& 推荐上头条 推荐 +1 推荐上头条 已推荐
文章上传作者
tansuozhe的热门文章
暂时没有热门文章噢~&
开发者交流群：
DevStore技术交流群2：
运营交流群：
产品交流群：
深圳尺子科技有限公司
深圳市南山区蛇口网谷万海大厦C栋504
Copyright (C) 2015 DevStore. All Rights Reserved
DevStore用户登录
还没有DevStore帐号？
快捷登录：}