如何使用搜索功能精确筛选数据?

效果展示:

如何使用搜索功能精确筛选数据?_第1张图片

前置准备:

  • 已搭建好,配少配置数据的搜索详情页

具体步骤:

  • 添加需要的组件
  • 添加需要查询的数据
  • 添加事件
  • 配置搜索按钮和动态容器触发器

步骤分解:

添加需要的组件

  • 添加 标签文本
  • 添加 图标
  • 添加 动态数据容器
  • 添加 输入框

如何使用搜索功能精确筛选数据?_第2张图片

如何使用搜索功能精确筛选数据?_第3张图片

添加需要查询的数据

  • 点击上方面板 数据中心
  • 创建数据表,添加自己需要的数据内容

如何使用搜索功能精确筛选数据?_第4张图片

添加事件

  • 点击上方面板 事件中心
  • 添加 数据事件 并进行配置

如何使用搜索功能精确筛选数据?_第5张图片

配置搜索按钮和动态容器触发器

  • 选中 动态数据容器 组件
  • 在右侧面板选中 触发器 添加接收数据触发器
  • 选中搜索 图标 组件
  • 在右侧面板选中 触发器 添加搜索触发器
  • 选中 循环条目 组件
  • 在右侧面板选中 数据绑定及设置 选中需要关联的数据

如何使用搜索功能精确筛选数据?_第6张图片

如何使用搜索功能精确筛选数据?_第7张图片

如何使用搜索功能精确筛选数据?_第8张图片

这样就可以使用搜索功能精确筛选数据了。
官网链接:https://www.towify.com/#/

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