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