Axure中继器制作网站首页操作实例

今天教大家用Axure中继器制作网站首页，做一个菜品的网站，各种特色的美食介绍的原型，里面有成千上百款菜式，axure首页页面效果制作具体步骤如下：

实例演示:https://axhub.im/ax9/fa8110bbefb4583b/#g=1

材料准备

• 中继器内材料：文本标签x1、图片x1；
• 中继器外材料：文本标签9个（分别填写文字：全部菜品、川菜、卤菜、粤菜、苏菜、浙菜、闽菜、湘菜、徽菜）、输入框x1、搜索图x1；

中继器内材料摆放

如下图所示拜访，图片大小可以根据素材设置：

中继器表格设置

中继器需要设置3列，如下图所示：

• type：菜品分类，需要和上边标签文字（川菜、卤菜、粤菜、苏菜、浙菜、闽菜、湘菜、徽菜）一致，如不一致，后续的分类会出现问题；
• picture：这里是演示时展示的图片，右键导入图片或者直接复制粘贴即可；
• biaoti：对应演示时候的标题文字。

中继器内交互

中继器内有两个交互。

设置文字，每项加载时，须有设置标题文字=item.biaoti。

设置图像，每项加载时，设置展示图片=item.picture。

中继器表格外材料摆放

如下图所示，摆放整齐美观即可，你们可以用顶端对齐和水平分布快速对齐。

分类筛选交互设置

首先，我们要把9个文本标签（分别填写文字：全部菜品、川菜、卤菜、粤菜、苏菜、浙菜、闽菜、湘菜、徽菜）设置为选项组组，鼠标单击时选中该文本，并且选择中时字体变成蓝色，显示蓝色的下框线。

然后川菜、卤菜、粤菜、苏菜、浙菜、闽菜、湘菜、徽菜这8个文本标签鼠标单击时，设置筛选事件；对中继器内type列进行筛选，只显示type列和选中的文本文字相同的内容。

点击全部菜品时，我们就不是筛选了，我们是要取消全部筛选即可。

模糊搜索交互设置

模糊搜索也是用中继器筛选的事件完成，不过这里要配合indexof函数使用。

这里简单介绍一下indexof函数，例如1234文本，我在里面找1，indexof函数会告诉我们1在第0位，如果找2，indexof会告诉我们他在第一位；如果我们找9的话，因为1234里面没有9，所以就找不到，一般我们就用indexof>-1如果成立，即所搜索的存在，否则则不存在。

所以我们这里需要设置变量LVAR1就是输入框的文字内容，然后在标题列里面搜索是否含有对应内容，只显示含有对应内容的行。

那到这里就制作完成了，完成之后我们只需要在excel整理好数据，然后复制粘贴到中继器表格，就马上实现了。

以上就是Axure中继器制作网站首页全部内容介绍了，关于更多axure9教程信息，欢迎关注北极熊素材库，给你带来最丰富的素材图片和最有用的教程，更多最新资讯。