引言

在諾亞財富項(xiàng)目中，使用到了通訊錄，如果只是簡單的查看，我個人覺得可能過于單調(diào)，于是就在查看的基礎(chǔ)上，增加了點(diǎn)擊滑動的效果。目的有兩個：1.體驗(yàn)不錯。2.通訊錄的數(shù)據(jù)量較大，我們在點(diǎn)擊一個模塊的同時，使這個模塊滑動至最上層，可視范圍也會變大。

效果

點(diǎn)擊一個模塊，頁面即開始向上滑動，直到這個模塊至于頁面最上層。
這是點(diǎn)擊前的地方，我們點(diǎn)擊運(yùn)營中心：

點(diǎn)擊后就會有一個滑動的動畫使這個模塊滑動到頂部：

實(shí)現(xiàn)

獲取元素，動態(tài)生成id
我們在點(diǎn)擊一個元素的同時，我們需要讓程序知道我們點(diǎn)擊了哪里，是具體到一個div，而不是我們手指點(diǎn)擊的地方。
在之前的wiki中有介紹到，接口返回的數(shù)據(jù)格式是一維數(shù)組，在轉(zhuǎn)成多維數(shù)組的同時需要對數(shù)據(jù)進(jìn)行一次遍歷，在這個時候我們就可以對各條數(shù)據(jù)加上id了：

在前端頁面這樣綁定id

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

Jquery中的scrolltop

一般大家都會想到使用jquery的這個方法，

使用方法是：

$(selector).scrollTop(offset)

這樣可以實(shí)現(xiàn)滑動，但是在使用過程中發(fā)現(xiàn)：點(diǎn)擊同一個模塊，不同的滑動位置點(diǎn)擊滑動的距離也不一樣，而且滑動到上層的內(nèi)容就不能再滑動回去的，這與我們的需求嚴(yán)重不符。
并且也研究了一些其他的插件，都不能實(shí)現(xiàn)我們想要的效果，那就像如此強(qiáng)大的ionic框架，是否會給我們提供這樣一個方法呢？

$ionicScrollDelegate

授權(quán)控制滾動視圖（通過ion-centent和 ion-scroll指令創(chuàng)建）。
該方法直接被$ionicScrollDelegate服務(wù)觸發(fā)，來控制所有滾動視圖。用 $getByHandle方法控制特定的滾動視圖。

這里包含了較多的方法，其中resize（）方法將在ng-if中經(jīng)常被使用到，另外

它提供了一個獲取屏幕當(dāng)前滾動高度的方法getPositionScroll()：

getScrollPosition()

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

這里我們只需要用到垂直高度，所以使用$ionicScrollDelegate. getPositionScroll().top即可獲取當(dāng)前滾動高度。

ScrollTo與scrollBy

這兩個方法就類似于絕對路徑（scrollTo）與相對位置（scrollBy）的關(guān)系。

我們獲取當(dāng)前點(diǎn)擊模塊的位置使用如下方法：

document.getElementById(x.id).offsetTop

這里獲取的是此div距離頂部的位置，但是我們每次的需求是希望我們點(diǎn)擊的模塊滑動到屏幕的最上方，而不是整個內(nèi)容的頂部，所以這里我們使用scrollBy比較好。

這樣的話，每次只需要移動屏幕頂部到點(diǎn)擊模塊的距離即可，方法是：

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

然后在點(diǎn)擊的方法中調(diào)用ionic自帶的scrollBy方法：

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

至此，此功能已經(jīng)實(shí)現(xiàn)，希望對大家有幫助。

本文所述到此結(jié)束，Ionic實(shí)現(xiàn)仿通訊錄點(diǎn)擊滑動及$ionicscrolldelegate使用分析已經(jīng)實(shí)現(xiàn)了，希望對大家有所幫助。

最新評論