引言

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

效果

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

點(diǎn)擊后就會(huì)有一個(gè)滑動(dòng)的動(dòng)畫使這個(gè)模塊滑動(dòng)到頂部：

實(shí)現(xiàn)

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

在前端頁面這樣綁定id

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

Jquery中的scrolltop

一般大家都會(huì)想到使用jquery的這個(gè)方法，

使用方法是：

$(selector).scrollTop(offset)

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

$ionicScrollDelegate

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

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

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

getScrollPosition()

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

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

ScrollTo與scrollBy

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

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

document.getElementById(x.id).offsetTop

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

這樣的話，每次只需要移動(dòng)屏幕頂部到點(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)，希望對(duì)大家有幫助。

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

最新評(píng)論