ionic通信錄點擊滑動效果的實現以及$ionicscrolldelegate使用分析

在諾亞財富項目中，使用到了通信錄，若是隻是簡單的查看，我我的以爲可能過於單調，因而就在查看的基礎上，增長了點擊滑動的效果。目的有兩個：1.體驗不錯。2.通信錄的數據量較大，咱們在點擊一個模塊的同時，使這個模塊滑動至最上層，可視範圍也會變大。

效果:
點擊一個模塊，頁面即開始向上滑動，直到這個模塊至於頁面最上層。
這是點擊前的地方，咱們點擊運營中心：

點擊後就會有一個滑動的動畫使這個模塊滑動到頂部：

實現:
獲取元素，動態生成id:
咱們在點擊一個元素的同時，咱們須要讓程序知道咱們點擊了哪裏，是具體到一個div，而不是咱們手指點擊的地方。
在以前的wiki中有介紹到，接口返回的數據格式是一維數組，在轉成多維數組的同時須要對數據進行一次遍歷，在這個時候咱們就能夠對各條數據加上id了：

在前端頁面這樣綁定id

<div ng-repeat="x in contacts_list" id="{{x.id}}">

Jquery中的scrolltop
通常你們都會想到使用jquery的這個方法，
使用方法是：

$(selector).scrollTop(offset)

這樣能夠實現滑動，可是在使用過程當中發現：點擊同一個模塊，不一樣的滑動位置點擊滑動的距離也不同，並且滑動到上層的內容就不能再滑動回去的，這與咱們的需求嚴重不符。
而且也研究了一些其餘的插件，都不能實現咱們想要的效果，那就像如此強大的ionic框架，是否會給咱們提供這樣一個方法呢？

$ionicScrollDelegate
受權控制滾動視圖（經過ion-centent和 ion-scroll指令建立）。
該方法直接被$ionicScrollDelegate服務觸發，來控制全部滾動視圖。用 $getByHandle方法控制特定的滾動視圖。

這裏包含了較多的方法，其中resize（）方法將在ng-if中常常被使用到，另外
它提供了一個獲取屏幕當前滾動高度的方法getPositionScroll()：

getScrollPosition()
• 返回: 對象 滾動到該視圖的位置，具備一下屬性：
o {數值} left 從左側到用戶已滾動的距離(開始爲 0)。
o {數值} top 從頂部到用戶已滾動的距離 (開始爲 0)。

這裏咱們只須要用到垂直高度，因此使用$ionicScrollDelegate. getPositionScroll().top便可獲取當前滾動高度。

ScrollTo與scrollBy
這兩個方法就相似於絕對路徑（scrollTo）與相對位置（scrollBy）的關係。
咱們獲取當前點擊模塊的位置使用以下方法：

document.getElementById(x.id).offsetTop

這裏獲取的是此div距離頂部的位置，可是咱們每次的需求是但願咱們點擊的模塊滑動到屏幕的最上方，而不是整個內容的頂部，因此這裏咱們使用scrollBy比較好。
這樣的話，每次只須要移動屏幕頂部到點擊模塊的距離便可，方法是：

var scroll = document.getElementById(x.id).offsetTop - $ionicScrollDelegate.getScrollPosition().top;

而後在點擊的方法中調用ionic自帶的scrollBy方法：

$ionicScrollDelegate.resize();
$ionicScrollDelegate.scrollBy(0,scroll,true);

至此，此功能已經實現，但願對你們有幫助。