前言

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

轉載于:https://www.cnblogs.com/shitoupi/p/7327081.html

總結

以上是生活随笔為你收集整理的ionic 实现仿苹果手机通讯录搜索功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。