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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
FCK调用方法..
Dec 21 Javascript
javascript的字符串按引用复制和传递,按值来比较介绍与应用
Dec 28 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
Node.js实用代码段之正确拼接Buffer
Mar 17 Javascript
微信小程序实战之顶部导航栏(选项卡)(1)
Jun 19 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
Sep 11 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
Sep 17 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
Oct 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
PHP 常用函数库和一些实用小技巧
2009/01/01 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
Thinkphp5.0 框架Model模型简单用法分析
2019/10/11 PHP
jQuery 性能优化指南 (1)
2009/05/21 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
2016/01/08 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
vue中的循环对象属性和属性值用法
2020/09/04 Javascript
python过滤字符串中不属于指定集合中字符的类实例
2015/06/30 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
python实现控制台打印的方法
2019/01/12 Python
django处理select下拉表单实例(从model到前端到post到form)
2020/03/13 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
如何让Java程序执行效率更高
2014/06/25 面试题
大专生自我鉴定范文
2013/10/01 职场文书
护士求职自荐信范文
2014/03/19 职场文书
《画家乡》教学反思
2014/04/22 职场文书
教师演讲稿大全
2014/05/16 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
中国汉字听写大会观后感
2015/06/02 职场文书
班主任寄语2016
2015/12/04 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
多台电脑共享文件怎么设置?多台电脑共享文件操作教程
2022/04/08 数码科技