ionic 实现仿苹果手机通信录搜索功能

前言

因为以前作的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的框架不是很了解致使走了很多弯路。但愿后续可以一帆风顺下去。

须要源码的能够联系我。qq：991085978