使用ivx实现标签导航的经验总结

标签导航可以把同类内容进行归并而且区分开不同分块，充分利用有限的空间，实现更条理化、更简洁的网页布局，常用于新闻页、电商产品展示等需要进行分类展示场景。今天就说一下如何实现这种效果。

1.首先我们将整个页面分成两个部分，上面的行用于显示标签，下面的行用于显示每个标签页的具体内容。

2.然后我们在标签行内循环创建标签，数据来源是我们已经填好的一个一位数组。for容器下的文本组件的内容直接绑定当前数据1即可，而背景颜色和文字颜色的数据绑定使用了三元表达式，目的是使选中的文本组件能够区分显示。

3.接下来是给for容器下的文本组件添加事件，每当我们点击文本组件，即选中该标签时，将该标签的序号值赋给数值变量“选中序号”。

4.最后就是设计内容行，因为一位数组“数据标签来源”中有五个元素，所以也就设计五个展示部分来与标签一一对应，将它们分别放进五个if容器中，判断条件就是该展示部分对应的标签名称在一位数组中的序号与数值变量“选中序号”相等，这样任意时刻只有一个if容器的条件是满足的，也就只有一个if容器内的展示部分是可见的。

5.拓展组件——标签页容器
ivx中其实也有一个拓展组件可以用于实现此类效果，即标签页容器。

标签页容器作为所有标签页组件的父容器，可以对标签的样式，位置和字体等属性进行设置。每个标签页相当于一个小型页面，我们可以自由添加各种布局组件。


总结
自定义实现导航标签功能最主要的就是建立标签部分与展示部分的联系，即选择标签后展示部分能切换到正确的展示内容。自定义的做法有很多可以改动的部分，比如demo中我们不添加那么多if容器，可以直接对五个展示部分，即五个绝对定位容器的可见属性进行数据绑定，这样最终的效果也是相同的。