废话不多说，直接开干。。。
第一步：拖控件：三级标题一个（自己做的组件）、左右箭头各一个，直线一条、矩形三个、中继器一个。
三级标题：为中继器天机数据
左右箭头各一个：控制标签栏选中位置
直线一条：指示选中位置，颜色改为白色
矩形三个：两个矩形线条为白色，放在中继器左右两侧，在中继器移动的时候起到遮盖的作用；一个放在中继器下方，作为内容页
中继器：标签页主要部分：双击中继器，进入编辑页，将里面的矩形修改为下边线不可见，其余边线颜色浅灰色。添加“X”，用来点击删除标签页。编辑中继器的数据集，为中继器添加原始数据。
所有控件的大小以及颜色可以根据自己的需求来自定义。
第二步：为中继器添加数据，点击三级标题为中继器添加数据。
此时就可以实现点击标题为中继器添加数据了。
第三步：白色直线左右移动
首先要给定初始位置以及记录其每次需要移动的距离，我这边按照屏幕大小白线给了99，中继器矩形给了100，移动距离为113。
其次，分析左右移动的情况：白色线条只能在两个箭头之间移动，中继器内容没有超过两个箭头区域，中继器内容超过两个箭头所在范围，中继器左右两侧是否接触左右箭头，为满足需求，添加全局变量：SelectedNumber（记录白色线条所在位置）、OnLineNumber（记录白色线条对应的中继器item），我对左右箭头的点击事件作出条件限制：
①白色线条在最左侧（也就是1号位置）时，判断OnLineNumber是否等于1，自该条件下SelectedNumber和OnLineNumber都减一，同时移动中继器内容。如图：
②白色线条不在最左侧：水平线移动-113，SelectedNumber和OnLineNumber都减一，如图：
③白色线条没有接触右箭头时，选中SelectedNumber数值不等于中继器item数量：SelectedNumber和OnLineNumber都加一，移动白色线条113，如图：
④白色线条接触右箭头时，判断中继器item数量是否超过左右箭头所示区域，选中OnLineNumber是否小于item数量，如图：
由以上四个限制条件可以完成所有移动条件的覆盖，白色线条左右移动完成。看效果。
第四步：点击中继器item改变白色线条位置：获取被点击的item的index ，利用index与OnLineNumber（记录白色线条所在位置）的差来确定白色线条移动的位置。同时从新设定OnLineNumber，以及选中位置SelectedNumber的值。
点击效果
好了，到这里标签页初步设计完成，与页面的关联就留给下一次再说了！
