利用微搭低代码实现搜索功能

简介: 利用微搭低代码实现搜索功能

日常在常见的电商app中,用的最多的就是搜索功能了。如果商家售卖的产品比较多,顾客想快速购买商品的时候如果需要一项项的查看,一个是效率不高,另外就是体验也不太好。


那我们就按照常规的app提供一个搜索功能,顾客可以输入查询条件,输入完毕后自动进行过滤。如果清除掉输入条件,那么又按照默认条件查询出所有数据来。


业务逻辑有了之后就需要考虑如何开发。低代码开发常见的开发步骤是:


  1. 搭建组件
  2. 定义变量
  3. 设置事件
  4. 变量绑定

我们就按照这几个步骤来开发一下搜索功能


1 搭建组件


组件的话我们是需要两个,一个是表单输入组件,用来存放查询条件。一个是列表容器组件,用来展示查询的结果。



2 定义变量


我们创建一个变量用来存储查询条件


3 变量绑定


变量定义好之后就可以和表单输入组件进行绑定



3 绑定行为


表单输入组件需要绑定两个事件,第一个是输入值改变时

第二个是清除内容时



4 给列表容器设置数据源并且设置查询条件


列表容器可以自动读取数据源的字段,这里选择商品数据源,并且需要设置查询条件,我们设置规则为模糊匹配

查询条件,先需要选择字段,然后选择模糊匹配,值得话选择变量并且绑定为我们的查询条件


最终效果


一切设置好之后就可以在预览区进行体验,我们可以先输入卡通包,输入完毕后数据自动完成了过滤。然后将输入的内容清除掉,就回到了初始的状态。

image.png

https://www.bilibili.com/video/av594787569/?zw



相关文章
|
5天前
|
存储 搜索推荐 安全
Onlyfans如何使用搜索功能?Onlyfans如何搜索博主?如何在OnlyFans搜索HongkongDoll
本文是一份全面的指南,旨在帮助读者了解如何在OnlyFans平台上有效使用搜索功能,尤其是如何找到特定的博主,比如HongkongDoll。我们深入探讨了OnlyFans的搜索机制,包括其对用户隐私的重视以及因此带来的搜索限制。文章详细介绍了三种主要的搜索方法:使用OnlyFans的官方搜索服务、通过社交媒体链接进行跳转、以及利用第三方搜索引擎如OnlySearch。
487 3
|
6月前
|
小程序 JavaScript
小程序搜索弹出搜索内容功能(模糊查询)
小程序搜索弹出搜索内容功能(模糊查询)
37 0
|
10月前
|
Java 索引
力扣35搜索插入位置:思路分析+图文详解+代码实现+拓展java源码
力扣35搜索插入位置:思路分析+图文详解+代码实现+拓展java源码
84 0
|
12月前
|
小程序 数据库
小程序搜索功能,云开发搜索,小程序云开发模糊搜索,同时搜索多个字段
小程序搜索功能,云开发搜索,小程序云开发模糊搜索,同时搜索多个字段
244 0
|
前端开发
前端学习案例-搜索参数2
前端学习案例-搜索参数2
42 0
前端学习案例-搜索参数2
|
前端开发
前端学习案例-搜索参数
前端学习案例-搜索参数
61 0
前端学习案例-搜索参数
|
存储 并行计算 算法
秒懂算法 | 搜索基础
本篇介绍了BFS和DFS的概念、性质、模板代码。
119 0
秒懂算法 | 搜索基础
|
Java 索引
搜索插入位置(Java实现)
搜索插入位置(Java实现)
71 0
|
定位技术