使用APICloud AVM多端组件快速实现app中的搜索功能

简介: 很多app中都有搜索功能的需求,本文介绍怎么使用APICloud AVM多端组件快速实现搜索功能。

很多app中都有搜索功能的需求,本文介绍怎么使用APICloud的AVM多端组件快速实现搜索功能。


在 APICloud 模块库搜索 animate-UISearchBar,添加到项目。多端组件需要下载源码,引入到项目使用。


animate-UISearchBar 有的功能:搜索占位提示语、搜索记录、清除搜索记录、搜索触发事件、取消搜索事件、可使用css自定义样式。


下载后解压的组件目录如下图:

1.jpg


其中animate-UISearchBar.stml为组件文件,放到项目的components 目录下,如图:

2.jpg


在需要使用的页面使用import语句引入组件animate-UISearchBar.stml,如图:

3.jpg


引用语句: import "../components/animate-UISearchBar/animate-UISearchBar.stml";

运行效果如下图:

网络异常,图片无法展示
|

通过以上过程,可以看到使用组件方便快捷,可以提高项目开发效率。


如果对怎么添加模块,调试模块还不熟悉,可参考以下文档:

模块使用教程:https://www.csdn.net/article/2022-01-26/122697219

Studio 3 教程文档:https://docs.apicloud.com/apicloud3/#/overview/devtools?index=0&subIndex=3

Studio 3 真机调试文档: https://docs.apicloud.com/Dev-Tools/studio3-wifi-debug

目录
相关文章
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现(源码+lw+部署文档+讲解等)
|
6天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的多功能智能手机阅读APP附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的多功能智能手机阅读APP附带文章源码部署视频讲解等
10 1
|
9天前
|
JavaScript 前端开发
uni-app组件 子组件onLoad、onReady事件无效
突然发现在项目中,组件 子组件的onLoad、onReady事件无效 打印也出不来值 怎么处理呢?
17 1
|
12天前
|
JSON 前端开发 API
移动端---------app开发03----apicloud必须掌握的代码
移动端---------app开发03----apicloud必须掌握的代码
|
12天前
|
前端开发 开发者
移动端-------app开发02,了解apicloud功能和使用,真机测试
移动端-------app开发02,了解apicloud功能和使用,真机测试
|
25天前
|
开发框架 移动开发 JavaScript
SpringCloud微服务实战——搭建企业级开发框架(四十七):【移动开发】整合uni-app搭建移动端快速开发框架-添加Axios并实现登录功能
在uni-app中,使用axios实现网络请求和登录功能涉及以下几个关键步骤: 1. **安装axios和axios-auth-refresh**: 在项目的`package.json`中添加axios和axios-auth-refresh依赖,可以通过HBuilderX的终端窗口运行`yarn add axios axios-auth-refresh`命令来安装。 2. **配置自定义常量**: 创建`project.config.js`文件,配置全局常量,如API基础URL、TenantId、APP_CLIENT_ID和APP_CLIENT_SECRET等。
163 60
|
1月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现
基于SpringBoot+Vue+uniapp的多功能智能手机阅读APP的详细设计和实现
44 12
|
1月前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的多功能智能手机阅读APP附带文章和源代码部署视频讲解等
20 0
|
2月前
|
移动开发 监控 供应链
JAVA智慧工厂制造生产管理MES系统,全套源码,多端展示(app、小程序、H5、台后管理端)
一开始接触MES系统,很多人会和博主一样,对MES细节的应用不了解,这样很正常,因为MES系统相对于其他系统来讲应用比较多!
78 1
JAVA智慧工厂制造生产管理MES系统,全套源码,多端展示(app、小程序、H5、台后管理端)
|
2月前
uni-app 179转发名片功能
uni-app 179转发名片功能
31 1