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 相关文章推荐
封装了一个js图片轮换效果的函数
Sep 28 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
Jan 12 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
May 23 Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
解决vue路由后界面没有变化,但是链接有的问题
Sep 01 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 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
VOLVO车载收音机
2021/03/02 无线电
php include的妙用,实现路径加密
2008/07/29 PHP
浅析PHP中strlen和mb_strlen的区别
2014/08/31 PHP
PHP实现递归目录的5种方法
2016/10/27 PHP
PHP hex2bin()函数用法讲解
2019/02/25 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
在chrome浏览器中,防止input[text]和textarea在聚焦时出现黄色边框的解决方法
2011/05/24 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
表格奇偶行设置不同颜色的核心JS代码
2013/12/24 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
深入分析javascript中console命令
2016/08/14 Javascript
Javascript基础回顾之(三) js面向对象
2017/01/31 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
Python的lambda匿名函数的简单介绍
2013/04/25 Python
Python实现的石头剪子布代码分享
2014/08/22 Python
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
咨询公司各岗位职责
2013/12/02 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
高中生物教学反思
2014/02/05 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
积极向上的团队口号
2014/06/06 职场文书
干部作风整顿自我剖析材料和整改措施
2014/09/18 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
交通安全教育主题班会
2015/08/12 职场文书
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android