ionic 實現仿蘋果手機通訊錄搜尋功能

標籤：個數   gif   div   動畫   height   ima   模組   手機通訊錄   字元   

前言

由於之前做的SRM行動裝置 App採用的是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 實現仿蘋果手機通訊錄搜尋功能