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