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);

至此，此功能已经实现，但愿对你们有帮助。