前言

由于之前做的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

ionic 实现仿苹果手机通讯录搜索功能的更多相关文章

  1. [Android分享] 【转帖】Android ListView的A-Z字母排序和过滤搜索功能

      感谢eoe社区的分享   最近看关于Android实现ListView的功能问题,一直都是小伙伴们关心探讨的Android开发问题之一,今天看到有关ListView实现A-Z字母排序和过滤搜索功能 ...

  2. Android 实现ListView的A-Z字母排序和过滤搜索功能,实现汉字转成拼音

    转载:http://blog.csdn.net/xiaanming/article/details/12684155 转载请注明出处:http://blog.csdn.net/xiaanming/ar ...

  3. Lucene5.5.4入门以及基于Lucene实现博客搜索功能

    前言 一直以来个人博客的搜索功能很蹩脚,只是自己简单用数据库的like %keyword%来实现的,所以导致经常搜不到想要找的内容,而且高亮显示.摘要截取等也不好实现,所以决定采用Lucene改写博客 ...

  4. Vue下简单分页及搜索功能

    最近利用Vue和element ui仿写了个小页面,记一哈分页和搜索功能的简单实现. 首页   emmmm..... 搜索框输入..... 搜索完成 数据是直接写在这里面的: cardPhoto:[ ...

  5. Android搜索功能的案例,本地保存搜索历史记录......

    开发的APP有一个搜索功能,并且需要显示搜索的历史记录,我闲暇之余帮她开发了这个功能,现把该页面抽取成一个demo分享给大家. 实现效果如图所示:  本案例实现起来很简单,所以可以直接拿来嵌入项目中使 ...

  6. Yii 1开发日记 -- 搜索功能及Checkbox的实现

    用yii 1实现后台的搜索功能,效果如下图: 1.模型中: public function search() { $criteria = new CDbCriteria; //独立高级搜索 if(is ...

  7. iOS--- UITableView + UISearchDisplayController - - - - -实现搜索功能

    iOS中UISearchDisplayController用于搜索,搜索栏的重要性我们就不说了,狼厂就是靠搜索起家的,现在越来越像一匹没有节操的狼,UC浏览器搜索栏现在默认自家的神马搜索,现在不管是社 ...

  8. SharePoint 2013 搜索功能,列表项目不能完全被索引

    描述 最近一个站点,需要开启搜索功能,然后创建内容源,开始爬网,发现列表里只有一部分被索引,很多项目没有被索引,甚是奇怪,如下图(其实列表里有80几条项目). 首先爬网账号是系统账号.服务器管理员,所 ...

  9. idea 光标变成粗体且当前文件搜索功能无法使用的问题

    今天安装了idea最新版,安装完成后发现光标变成了粗体,并且快捷键在使用时出现了问题,比如:ctrl+F搜索功能无法使用 经过反复修改配置也无法改善情况,后来一次重启看到下面小窗弹出有关vim的一个提 ...

随机推荐

  1. 1px解决方案--集锦

    没有废话,直接上代码 汇聚各种版本,持续更新中.... 1.sass @charset "utf-8"; /** * @module 背景与边框 * @description 为元 ...

  2. Spring MVC 返回Json数据环境记录

    Spring 版本 Spring4.3.18 Json包  jackson-annotations-2.9.8.jar jackson-core-2.9.8.jar           jackson ...

  3. 亚马逊促销活动Promotion②:Money Off(满减折扣)的设置教程

    满减.折扣是放之四海皆有效的促销手段,虽然亚马逊对卖家有诸多限制,但这个促销方式却是允许的,对亚马逊的卖家而言,这对提升商品销量.打造爆款都是极好的.今天小编来讲讲亚马逊的Money Off要怎么设置 ...

  4. 5种网络IO模型

    5种网络IO模型(有图,很清楚)   同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到 ...

  5. vue中data中引用本地图片报错404

    首先说明vue-cli中assets和static两个文件的区别 1.assets在项目编译的过程中会被webpack处理理解为模块依赖,如果执行npm run dev或npm run build命令 ...

  6. 项目部署Vue+Django(luffy)

    部署路飞学城 部署整体框架图: 1 熟悉linux操作 2 上传路飞学城项目到linux服务器 xftp上传到服务器 lrzsz工具 3 完成python3解释器的安装 在linux命令行模式下, 输 ...

  7. OR,RR,HR 临床分析应用中的差别 对照组暴露比值b/d

    1.相对危险度(relative risk,RR).指暴露于某因素发生某事件的风险,即A/(A+B),除以未暴露人群发生的该事件的风险,即C/(C+D),所得的比值,即RR=[A/(A+B)]/[C/ ...

  8. IIS Service Unavailable HTTP Error 503. The service is unavailable.

    IIS突然报了上图这样一个错误,很意外,这问题的来源百度上有多个版本,处理的办法几乎都是一样的,你可以通过下边这个链接去查看, https://www.cnblogs.com/fri-yu/p/407 ...

  9. 10、Typescript-类的基本用法

    类就是构造函数的另一写法 以前构造函数的写法: 类的基本用法:

  10. 基于Kubernetes构建企业容器云

    前言 团队成员有DBA.运维.Python开发,由于需要跨部门向公司私有云团队申请虚拟机, 此时我在思考能否在现有已申请的虚拟机之上,再进行更加细粒度的资源隔离和划分,让本团队的成员使用, 也就是在私 ...