Use APICloud AVM multi-terminal components to quickly implement the search function in the app

Many APPs have search function requirements. This article introduces how to use avm multi-terminal components to quickly implement search functions.

Search for animate-UISearchBar in the APICloud module library and add it to the project. Multi-terminal components need to download the source code and introduce it into the project for use.

animate-UISearchBar has functions: search placeholder prompts, search records, clear search records, search trigger events, cancel search events, and can use css custom styles.

After downloading, the decompressed component directory is as follows:

Among them, animate-UISearchBar.stml is a component file, which is placed in the components directory of the project, as shown in the figure:

Use the import statement to import the component animate-UISearchBar.stml on the page to be used, as shown in the figure:

Quote statement: import "../components/animate-UISearchBar/animate-UISearchBar.stml";

The operation effect is as follows:

Through the above process, it can be seen that the use of components is convenient and fast, which can improve the efficiency of project development.

If you are not familiar with how to add modules and debug modules, you can refer to the following documents:

Module usage tutorial: https://www.csdn.net/article/2022-01-26/122697219

studio 3 tutorial documentation: https://docs.apicloud.com/apicloud3/#/overview/devtools?index=0&subIndex=3

Studio 3 real machine debugging documentation: https://docs.apicloud.com/Dev-Tools/studio3-wifi-debug