标签导航

效果

今天和大家分享一个简单的效果，利用ZION实现tab切换，如图所示：

需用到以下组件：

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

制作过程

第一步：页面基本布局

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

第二步：添加本地数据

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

第三步：绑定本地数据

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

第四步：给条件式容器添加文本

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

第五步：选择视图和条件式容器绑定

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

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

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

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