Axure 用中继器来制作标签页

废话不多说，直接开干。。。

第一步：拖控件：三级标题一个（自己做的组件）、左右箭头各一个，直线一条、矩形三个、中继器一个。

三级标题：为中继器天机数据

左右箭头各一个：控制标签栏选中位置

直线一条：指示选中位置，颜色改为白色

矩形三个：两个矩形线条为白色，放在中继器左右两侧，在中继器移动的时候起到遮盖的作用；一个放在中继器下方，作为内容页

中继器：标签页主要部分：双击中继器，进入编辑页，将里面的矩形修改为下边线不可见，其余边线颜色浅灰色。添加“X”，用来点击删除标签页。编辑中继器的数据集，为中继器添加原始数据。

控件添加完成

所有控件的大小以及颜色可以根据自己的需求来自定义。

第二步：为中继器添加数据，点击三级标题为中继器添加数据。

为中继器数据集添加数据

此时就可以实现点击标题为中继器添加数据了。

第三步：白色直线左右移动

首先要给定初始位置以及记录其每次需要移动的距离，我这边按照屏幕大小白线给了99，中继器矩形给了100，移动距离为113。

其次，分析左右移动的情况：白色线条只能在两个箭头之间移动，中继器内容没有超过两个箭头区域，中继器内容超过两个箭头所在范围，中继器左右两侧是否接触左右箭头，为满足需求，添加全局变量：SelectedNumber（记录白色线条所在位置）、OnLineNumber（记录白色线条对应的中继器item），我对左右箭头的点击事件作出条件限制：

①白色线条在最左侧（也就是1号位置）时，判断OnLineNumber是否等于1，自该条件下SelectedNumber和OnLineNumber都减一，同时移动中继器内容。如图：

左箭头点击事件1

②白色线条不在最左侧：水平线移动-113，SelectedNumber和OnLineNumber都减一，如图：

左箭头点击事件2

③白色线条没有接触右箭头时，选中SelectedNumber数值不等于中继器item数量：SelectedNumber和OnLineNumber都加一，移动白色线条113，如图：

右箭头点击事件1

④白色线条接触右箭头时，判断中继器item数量是否超过左右箭头所示区域，选中OnLineNumber是否小于item数量，如图：

右箭头点击事件2

由以上四个限制条件可以完成所有移动条件的覆盖，白色线条左右移动完成。看效果。

此时左侧箭头点击无效果

此时白色线条接触右箭头点击右箭头进入下一图片

此时白色线条接触右箭头中继器item到达最大值右箭头点击无效果

白色线条接触左箭头，选中中继器item不是第一位

点击左箭头回到开始位置

第四步：点击中继器item改变白色线条位置：获取被点击的item的index ，利用index与OnLineNumber（记录白色线条所在位置）的差来确定白色线条移动的位置。同时从新设定OnLineNumber，以及选中位置SelectedNumber的值。

item点击事件

点击效果

白色线条初始位置

点击标题“三级标题1-1-3”

点击标题“1”

好了，到这里标签页初步设计完成，与页面的关联就留给下一次再说了！