Ionic3 UI组件之autocomplete详解


Posted in Javascript onJune 08, 2017

无论是web开发还是app开发,autocomplete是常用组件之一。

可惜截止到目前,ionic官方并未提供此组件。

ionic2-autocomplete是GitHub上的开源的Ionic2组件,本文将讲解如何在自己的项目中使用它。

组件地址https://github.com/kadoshms/ionic2-autocomplete

1)npm install ionic2-auto-complete --save

2)打开app.module.ts,添加:import { AutoCompleteModule } from 'ionic2-auto-complete';

并且在imports数组里面增加AutoCompleteModule

3)打开app.scss,添加:@import "../../node_modules/ionic2-auto-complete/auto-complete";

4)直接找你的page中使用组件:<ion-auto-complete></ion-auto-complete>

5)给autocomplete添加dataProvider:写一个service来从后台获取数据,ionic g provider autocomplete-service,

代码如下:

Ionic3 UI组件之autocomplete详解

别忘了在app.module.ts中增加:

import{AutocompleteServiceProvider}from'../providers/autocomplete-service/autocomplete-service';

并且在providers数组中增加AutocompleteServiceProvider。

7)在你使用autocomplete组件的page ts文件中,增加:

import{AutocompleteServiceProvider}from'../../providers/autocomplete-service/autocomplete-service';constructor构造函数中增加:publicautocompleteSer:AutocompleteServiceProvider

8)在刚刚使用ion-auto-complete的地方修改为:<ion-auto-complete[dataProvider]="autocompleteSer"></ion-auto-complete>9)

ionic serve看看效果吧。

Ionic3 UI组件之autocomplete详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
常用简易JavaScript函数
Apr 09 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
运算符&amp;&amp;的三个不同层次
Apr 07 Javascript
Seajs的学习笔记
Mar 04 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
Apr 06 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
原生javascript移动端滑动banner效果
Mar 10 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
jQuery+ajax实现局部刷新的两种方法
Jun 08 #jQuery
gulp解决跨域的配置文件问题
Jun 08 #Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 #Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 #jQuery
Ionic项目中Native Camera的使用方法
Jun 07 #Javascript
详解angular ui-grid之过滤器设置
Jun 07 #Javascript
微信小程序 地图map实例详解
Jun 07 #Javascript
You might like
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
php学习笔记 数组的常用函数
2011/06/13 PHP
php发送post请求函数分享
2014/03/06 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
PHP解决中文乱码
2017/04/28 PHP
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
JavaScript中的操作符==与===介绍
2014/12/31 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
2017/03/29 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
微信小程序实现带放大效果的轮播图
2020/05/26 Javascript
基于小程序请求接口wx.request封装的类axios请求
2020/07/02 Javascript
Python中给List添加元素的4种方法分享
2014/11/28 Python
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
利用Python实现颜色色值转换的小工具
2016/10/27 Python
Python列表切片用法示例
2017/04/19 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
公司联欢晚会主持词
2014/03/22 职场文书
商场促销活动总结
2014/07/10 职场文书
酒店前台辞职书
2015/02/26 职场文书
介绍信格式样本
2015/05/05 职场文书
2015年妇产科工作总结
2015/05/18 职场文书