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代码
Dec 01 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
谈谈我对JavaScript中typeof和instanceof的深入理解
Dec 25 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
JS中判断null的方法分析
Nov 21 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
详解vue在项目中使用百度地图
Mar 26 Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
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
Destoon模板制作简明教程
2014/06/20 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
php 魔术常量详解及实例代码
2016/12/04 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
javascript学习笔记(六)数据类型和JSON格式
2014/10/08 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
全面解析Bootstrap布局组件应用
2016/02/22 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
Vue2.0 UI框架ElementUI使用方法详解
2017/04/14 Javascript
Angularjs单选框相关的示例代码
2017/08/17 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
决策树的python实现方法
2014/11/18 Python
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
python实现k-means聚类算法
2018/02/23 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
python 并发编程 多路复用IO模型详解
2019/08/20 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
Move Free官方海外旗舰店:美国骨关节健康专业品牌
2017/12/06 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
历史系自荐信范文
2013/12/24 职场文书
20年同学聚会感言
2014/02/03 职场文书
军训考核自我鉴定
2014/02/13 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
安全承诺书
2015/01/19 职场文书
班主任远程培训研修日志
2015/11/13 职场文书
2016年主题党日活动总结
2016/04/05 职场文书
Python语言内置数据类型
2022/02/24 Python