ionic利用$ionicScrollDelegate委托scroll

许多app中，常常有根据界面的滚动来触发事件的需求，之前我在处理这种需求时，走进了一个严重的误区，我是通过JQuery来实现的，不仅实现方法麻烦，还导致了ionic自带scroll的禁用，如果这个时候再要求使用无限滚动，肯定会导致很多问题。
那么在ionic中，如何利用自带的scroll呢？答案是通过$ionicScrollDelegate服务委托<ion-scroll>标签中的内容

首先我们讲一下$ionicScrollDelegate的用法
在html代码中，可以在<ion-content>标签或者<ion-scroll>标签中，用delegate-handle来标识这个滚动视图

举例：
 <ion-content delegate-handle="myscroll">
    <!--code-->
 </ion-content>

在html中标识好后，在controller中可以用

$ionicScrollDelegate.$getByHandle('myscroll');

来拿到html中标识好的滚动视图
$getByHandle()方法是用来拿到html中视图的方法
拿到需要的视图后，就可以进一步通过$ionicScrollDelegate中封装好的方法来对滚动视图进行操作

那么$ionicScrollDelegate中都有哪些方法呢？
1.scrollTop([shouldAnimate])

 scrollTop()方法是让滚动视图回滚到界面顶部，而方法中的参数，shouldAnimate为布尔型的值，当为true时，回滚顶部时有动画的，当为false的时候，则没有动画
用法举例：
 $ionicScrollDelegate.$getByHandle('myscroll').scrollTop([true]);

2.scrollBottom([shouldAnimate])

scrollBottom()方法和scrollTop()方法用法一样，区别在于让滚动视图滚动界面底部

3.scrollTo(left, top, [shouldAnimate])

本方法是让滚动视图横向或纵向滚动一定距离，参数1为横向沿x轴滚动的距离，参数2为纵向沿y轴滚动的距离，参数3为是否有滚动的动画

4.scrollBy(left, top, [shouldAnimate])

本方法是让滚动视沿横向或纵向滚动到具体某个位置，参数含义与scrollTo()相同

5.getScrollPosition()

得到当前的位置，返回的是一个对象，包含left和top两个字段

$ionicScrollDelegate服务中经常使用的方法是这些，其他的可以参考官网的文档

http://ionicframework.com/docs/api/service/$ionicScrollDelegate/

当我们要配合手势使用这个滚动的方法时，我们可以通过on-scroll，on-drag-left，on-drag-right，on-swipe-left，on-swipe-right这些手势配合滚动视图来使用