如何使用组件切换器做话题导航

使用组件切换器实现一个标签导航

效果展示

前置准备

背景素材

话题图标素材

具体步骤

制作背景

制作话题导航

制作话题导航结果列表

设置组件切换器关联内容

创建切换组件行为触发器

创建点击行为触发器

步骤分解

制作背景

将背景素材添加到根容器

拖拽组件切换器到 背景素材上

选中组件切换器

点击检查面板的样式

调整组件切换器 样式

制作话题导航

拖拽容器 到编辑区

选中容器

点击检查面板 中 的样式

配置容器的 样式

拖拽标签文本 到容器中

选中标签文本

点击检查面板 中 的样式

调整标签文本 的 样式

将话题图标素材添加到标签文本中

制作话题导航结果列表

拖拽循环容器到 布局到容器

选中循环容器

点击检查面板中的样式

配置循环容器的样式

拖拽图片组件到循环列表项

选中图片组件

调整图片组件 的样式

拖拽标签文本到循环列表项

选中标签文本

调整标签文本 的样式

鼠标右键 复制 一个容器

为新复制的容器,更换图片和文本

设置组件切换器关联内容

选中 组件切换器

点击检查面板中的数据绑定与设置

点击加号,设置关联内容

创建切换组件行为触发器

选中组件切换器

点击检查面板中的 触发器

创建如下 触发器

创建点击行为触发器

选中 标签文本

点击检查面板中的 触发器

创建触发器

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容