ionic3框架开发之-SRM移动应用之通讯录开发
来源:互联网 发布:caffe实现fcn 编辑:程序博客网 时间:2024/06/16 20:42
前言
由于之前做的SRM移动应用采用的是ionic1.x框架进行开发的,由于性能方便的诟病,导致用户体验不是很友好,于是想着怎么样去提高应用的性能问题。此时刚好ionic3.x框架已发布,由于ionic1.x框架是在ng1.x的框架基础上开发的,但是ionic3.x是在ng4.x基础上开发的。于是呼去ng官网上去了解了ng的一下语法及规则的使用,发现ng4.x不向前兼容,ng4.x是基于Es6标准进行开发的。本着出生不拍牛犊的性子,觉得升级应该不会太难,没想到这里面的坑太多了,费了九牛二虎之力才做了一个通讯录模块。为了后续用ionic3.x开发的同志们避免我的覆辙,走太多的弯路,本着开源的精神特此将通讯录模块贡献给大家。
需求
业务需求描述
1.搜索关键字,将通讯录检索出来,并分组显示,并且可以清空搜索的关键字。
2.高亮显示关键字。
3。右侧中的首字母悬浮在右侧,点击时可快速定位。显示点击的字母居中显示,并带有滑动动画效果。
根据上面的效果图,我们编写静态页面模拟数据,整理好思路,我们可以了解到我们在开发的时候需要定义一下属性。
1,定义一个字符串存放请求的通讯录的地址,定义一个字符串变量存放搜索的关键字,定义一个数组存放右侧检出的首字母,定义一个二维数组存放通讯录数据,定义一个二维数组存放搜索后的通讯录数据。
代码的实现
搜索关键字高亮显示
由于之前ng1.x的过滤器,无法向后兼容,ng4.x采用的是pipe管道进行过滤,了解了一下使用之后开始撸代码咯。实现方式如下:
模拟本地数据请求的通讯录如下
由于后端返回的数据格式,和我需要处理的数据格式不匹配,所以首先进行了数据格式化处理之后,
搜索关键字分组显示
由于后端返回的数据格式,和我需要处理的数据格式不匹配,所以首先进行了数据格式化处理之后,在通过Array.fliter的方法进行过滤处理.实现的代码如下:
右侧首字母定位
给每一个通讯录分组的搜字母一个id属性,通过ElementRef服务找到当前的dom节点并获取当前的位置, 通过ionic3中content中提供的scrollTo函数属性快速定位,实现过程如下:
渲染的模板页面如下
实现的Class类如下:
总结:
虽然功能需求比较简单,但是由于对ng4.x的框架不是很了解导致走了不少弯路。希望后续能够一路顺风下去。
- ionic3框架开发之-SRM移动应用之通讯录开发
- ionic3框架开发-SRM移动应用之待办事项模块
- Hybird HTML5 App(移动应用开发)之:了解Ionic框架
- iOS开发之通讯录
- iOS开发:通讯录之联系人添加、移动、删除
- iOS开发:通讯录之通讯录列表实现
- 移动开发之Android常用框架
- Symbian OS应用开发学习笔记之通讯录(转)
- Symbian OS应用开发学习笔记之通讯录
- iOS开发之系统通讯录
- Android 通讯录开发之通话记录
- Android通讯录开发之联系人
- ios开发 之 通讯录操作
- Android移动应用开发之MySQL操作
- 企业移动应用开发管理之浅谈
- 移动开发之页面字体的应用
- MES移动应用快速开发平台之移动oa解决方案
- [框架之谈]极佳的 JS 移动应用程序开发框架
- 程序设计思维
- 各种数论定理
- Linux压缩解压命令详细介绍(gizp、tag、zip、bzip2)
- 添加ppa源后导致update无法下载
- 网易2017 跳石板问题
- ionic3框架开发之-SRM移动应用之通讯录开发
- Android根据byte数组,生成图片,图片名字以当前时间作为名字
- Nginx配置SSI
- OutOfMemoryError异常总结
- 2017 Multi-University Training Contest
- php接口接收json数据
- nodejs+mongoose连
- 单例模式
- 关于radio 单选框在项目中的一些心得