使用组件切换器实现一个标签导航
效果展示
前置准备
背景素材
话题图标素材
具体步骤
制作背景
制作话题导航
制作话题导航结果列表
设置组件切换器关联内容
创建切换组件行为触发器
创建点击行为触发器
步骤分解
制作背景
将背景素材添加到根容器
拖拽组件切换器到 背景素材上
选中组件切换器
点击检查面板的样式
调整组件切换器 样式
制作话题导航
拖拽容器 到编辑区
选中容器
点击检查面板 中 的样式
配置容器的 样式
拖拽标签文本 到容器中
选中标签文本
点击检查面板 中 的样式
调整标签文本 的 样式
将话题图标素材添加到标签文本中
制作话题导航结果列表
拖拽循环容器到 布局到容器
选中循环容器
点击检查面板中的样式
配置循环容器的样式
拖拽图片组件到循环列表项
选中图片组件
调整图片组件 的样式
拖拽标签文本到循环列表项
选中标签文本
调整标签文本 的样式
鼠标右键 复制 一个容器
为新复制的容器,更换图片和文本
设置组件切换器关联内容
选中 组件切换器
点击检查面板中的数据绑定与设置
点击加号,设置关联内容
创建切换组件行为触发器
选中组件切换器
点击检查面板中的 触发器
创建如下 触发器
创建点击行为触发器
选中 标签文本
点击检查面板中的 触发器
创建触发器