通过使用数据中心的创建事件和API Hub中定义成功的搜索图片接口实现一个历史搜索展示

效果展示

前置准备

• 在 API Hub 中创建成功的图片搜索接口

具体步骤

• 创建数据表

• 制作搜索界面

• 创建事件

• 创建触发器

• 绑定数据

步骤分解

创建数据表

• 点击 数据中心

• 创建 数据表

制作搜索界面

• 拖拽 组件切换器 到 根容器

• 拖拽 容器 到 编辑区

• 选中 组件切换器

• 点击 检查面板 中的 数据绑定与样式

• 设置关联内容

• 选中 组件素材

• 拖拽 搜索框 到 容器

拖拽 流式布局 到 容器

拖拽 循环容器 到 容器

拖拽 图片 到 流式布局 的 条目

拖拽 标签文本 到 循环容器 的 条目

创建事件

• 点击 事件中心

• 配置事件

创建触发器

• 选中 组件切换器

• 点击 检查面板 中的 触发器

• 创建 触发器

选中 循环容器

点击 检查面板 中的 触发器

创建 触发器

• 选中 输入框

• 点击 检查面板 中的 触发器

• 创建 触发器

• 选中搜索图标

• 点击 检查面板 中的 触发器

• 创建 触发器

• 选中 输入框

• 点击 检查面板 中的 触发器

• 创建 触发器

绑定数据

• 选中 循环条目

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

• 绑定数据

这样就可以实现动态实时搜索框下方展示历史搜索记录了。