今天和大家分享一个小功能的制作方法，利用Zion实现【Tab切换】，这个功能是非常常见的，如图所示：

需用到以下组件：

• 文字
• 选择视图（自带按钮组件）
• 条件式容器

制作过程

步骤1：页面基本布局

• 在页面中添加选择视图和条件式容器两个组件，如图所示：

步骤2：添加本地数据

• 给选择视图添加本地数据，数据内容分别为：个人主页、我的文章、我的代码，默认值为：个人主页，如图所示：

步骤3：绑定本地数据

• 双击选择视图，给正常视图和选中视图绑定数据，内容：本地数据/选择视图/item，如图所示：

步骤4：给条件式容器添加文本

• 给三个视图分别添加文字，文字内容自拟，空白项不要删，默认空白，如图所示：

步骤5：选择视图和条件式容器绑定

• 点击不同的视图，显示的内容是不同的，双击条件式容器，分别给每个容器添加条件设置，如下：

1. 个人主页：等于 → 运算数据类型：文本 → 运算数：选择器/选择视图 → 值：个人主页

1. 我的文章：等于 → 运算数据类型：文本 → 运算数：选择器/选择视图 → 值：我的文章

1. 我的代码：等于 → 运算数据类型：文本 → 运算数：选择器/选择视图 → 值：我的代码

只需要短短5个步骤，就可以实现Tab式导航栏，相比自己一行代码一行代码的敲，当然是这样更省时间去做更需要动脑子的事情了。