$ionicScrollDelegate

授权控制滚动视图(通过ionContentionScroll指令创建)。

该方法直接被$ionicScrollDelegate服务触发,来控制所有滚动视图。用 $getByHandle方法控制特定的滚动视图。

用法

<body ng-controller="MainCtrl">
  <ion-content>
    <button ng-click="scrollTop()">滚动到顶部!</button>
  </ion-content>
</body>
function MainCtrl($scope, $ionicScrollDelegate) {
  $scope.scrollTop = function() {
    $ionicScrollDelegate.scrollTop();
  };
}

高级用法的例子,用带有两个滚动区域的delegate-handle来特殊控制。

<body ng-controller="MainCtrl">
  <ion-content delegate-handle="mainScroll">
    <button ng-click="scrollMainToTop()">
      滚动内容到顶部!
    </button>
    <ion-scroll delegate-handle="small" style="height: 100px;">
      <button ng-click="scrollSmallToTop()">
        滚动小区域到顶部!
      </button>
    </ion-scroll>
  </ion-content>
</body>
function MainCtrl($scope, $ionicScrollDelegate) {
  $scope.scrollMainToTop = function() {
    $ionicScrollDelegate.$getByHandle('mainScroll').scrollTop();
  };
  $scope.scrollSmallToTop = function() {
    $ionicScrollDelegate.$getByHandle('small').scrollTop();
  };
}

方法

resize()

告诉滚动视图重新计算它的容器大小。

scrollTop([shouldAnimate])

参数 类型 详情
shouldAnimate
(可选)
布尔值

是否应用滚动动画。

scrollBottom([shouldAnimate])

参数 类型 详情
shouldAnimate
(可选)
布尔值

是否应用滚动动画。

scrollTo(left, top, [shouldAnimate])

参数 类型 详情
left 数值

水平滚动的值。

top 数值

垂直滚动的值。

shouldAnimate
(可选)
布尔值

是否应用滚动动画。

scrollBy(left, top, [shouldAnimate])

参数 类型 详情
left 数值

水平滚动的偏移量。

top 数值

垂直滚动的偏移量。

shouldAnimate
(可选)
布尔值

是否应用滚动动画。

getScrollPosition()

  • 返回: 对象 滚动到该视图的位置,具有一下属性:
    • {数值} left 从左侧到用户已滚动的距离(开始为 0)。
    • {数值} top 从顶部到用户已滚动的距离 (开始为 0)。

anchorScroll([shouldAnimate])

告诉滚动视图用一个带有id的滚动元素匹配window.location.hash。

如果没有匹配到元素,它会滚动到顶部。

参数 类型 详情
shouldAnimate
(可选)
布尔值

是否应用滚动动画。

getScrollView()

  • 返回: 对象 匹配具有授权的滚动视图。

rememberScrollPosition(id)

当滚动视图被销毁时(用户离开页面),页面最后的滚动位置会被指定的索引保存。

注意:根据一个ion-nav-view将页面和一个视图关联,rememberScrollPosition自动保存它们的滚动。

相关方法:scrollToRememberedPosition, forgetScrollPosition (低)。

在下面的例子中,ion-scroll元素的滚动位置会被保留, 甚至当用户切换开关时。

<ion-toggle ng-model="shouldShowScrollView"></ion-toggle>
<ion-scroll delegate-handle="myScroll" ng-if="shouldShowScrollView">
  <div ng-controller="ScrollCtrl">
    <ion-list>
      <ion-item ng-repeat="i in items">{{i}}</ion-item>
    </ion-list>
  </div>
</ion-scroll>
function ScrollCtrl($scope, $ionicScrollDelegate) {
  var delegate = $ionicScrollDelegate.$getByHandle('myScroll');

  // 这里可以放任何唯一的ID。重点是:要在每次重新创建控制器时
  // 我们要加载当前记住的滚动值。
  delegate.rememberScrollPosition('my-scroll-id');
  delegate.scrollToRememberedPosition();
  $scope.items = [];
  for (var i=0; i<100; i++) {
    $scope.items.push(i);
  }
}
参数 类型 详情
id 字符串

保留已滚动位置的滚动视图的id。

forgetScrollPosition()

停止保存这个滚动视图的滚动位置。

scrollToRememberedPosition([shouldAnimate])

如果这个滚动视图有个和它的滚动位置关联的id(通过调用rememberScrollPosition方法),然后记住那个位置,加载那个位置然后滚动到那个位置。

参数 类型 详情
shouldAnimate
(可选)
布尔值

是否应用滚动动画。

$getByHandle(handle)

参数 类型 详情
handle 字符串
  • 返回: delegateInstance一个代表性实例就是只控制带有delegate-handle的滚动视图来匹配给定的句柄。

例如: $ionicScrollDelegate.$getByHandle('my-handle').scrollTop();