如何动态实现搜索框下方展示历史搜索记录?

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

效果展示

前置准备

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

具体步骤

  • 创建数据表
  • 制作搜索界面
  • 创建事件
  • 创建触发器
  • 绑定数据

步骤分解

创建数据表

  • 点击 数据中心
  • 创建 数据表

如何动态实现搜索框下方展示历史搜索记录?_第1张图片

制作搜索界面

  • 拖拽 组件切换器 到 根容器
  • 拖拽 容器 到 编辑区
  • 选中 组件切换器
  • 点击 检查面板 中的 数据绑定与样式
  • 设置关联内容

如何动态实现搜索框下方展示历史搜索记录?_第2张图片

  • 选中 组件素材
  • 拖拽 搜索框 到 容器

如何动态实现搜索框下方展示历史搜索记录?_第3张图片

拖拽 流式布局 到 容器

拖拽 循环容器 到 容器

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

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

创建事件

  • 点击 事件中心
  • 配置事件

如何动态实现搜索框下方展示历史搜索记录?_第4张图片

如何动态实现搜索框下方展示历史搜索记录?_第5张图片

如何动态实现搜索框下方展示历史搜索记录?_第6张图片

创建触发器

  • 选中 组件切换器
  • 点击 检查面板 中的 触发器
  • 创建 触发器

选中 循环容器

点击 检查面板 中的 触发器

创建 触发器

  • 选中 输入框
  • 点击 检查面板 中的 触发器
  • 创建 触发器

  • 选中搜索图标
  • 点击 检查面板 中的 触发器
  • 创建 触发器

  • 选中 输入框
  • 点击 检查面板 中的 触发器
  • 创建 触发器

绑定数据

  • 选中 循环条目
  • 点击 检查面板 中的 数据绑定与设置
  • 绑定数据

这样就可以实现动态实时搜索框下方展示历史搜索记录了。
官网链接:https://www.towify.com/#/

你可能感兴趣的:(微信小程序无代码开发平台)