$ionicScrollDelegate

授权控制滚动视图(通过(ionic-china中文网文档)ionContent和(ionic-china中文网文档)ionScroll指令创建)。

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

实例该文档来自ionic中文网ionic-china

<body ng-controller="MainCtrl">
  <ion-content>
    <button ng-click="scrollTop()">Scroll to Top!</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()">
      Scroll content to top!
    </button>
    <ion-scroll delegate-handle="small" style="height: 100px;">
      <button ng-click="scrollSmallToTop()">
        Scroll small area to top!
      </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
(可空)
boolean

滚动过程是否使用动画

scrollBottom([shouldAnimate])

使滚动条滚动到底部。

参数 类型 说明
shouldAnimate
(可空)
boolean

滚动过程是否使用动画

scrollTo(left, top, [shouldAnimate])

使滚动条滚动到指定位置。

参数 类型 说明
left number

x轴的横向位置

top number

y轴的纵向位置

shouldAnimate
(可空)
boolean

滚动过程是否使用动画

scrollBy(left, top, [shouldAnimate])

使滚动条从当前位置滚动到指定位置。

参数 类型 说明
left number

x轴的目标横向位置

top number

y轴的目标纵向位置

shouldAnimate
(可空)
boolean

滚动过程是否使用动画

zoomTo(level, [animate], [originLeft], [originTop])

缩放到指定级别。

参数 类型 说明
level number

缩放等级

animate
(可空)
boolean

缩放过程是否使用动画

originLeft
(可空)
number

缩放到左边的位置

originTop
(可空)
number

缩放到顶边的位置

zoomBy(factor, [animate], [originLeft], [originTop])

从当前缩放级别,缩放到指定级别。

参数 类型 说明
factor number

缩放的数值

animate
(可空)
boolean

缩放过程是否使用动画

originLeft
(可空)
number

缩放到目标左边的位置

originTop
(可空)
number

缩放到目标顶边的位置

getScrollPosition()

获取当前滚动条位置。

  • 返回: object滚动条相对于视图的位置 属性如下:
    • {number} left 从0开始到左边的位置
    • {number} top 从0开始到顶边的位置

anchorScroll([shouldAnimate])

定位滚动,当被调用的时候,页面会滚动到与元素相关联的指定的window.location.hash处。

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

参数 类型 说明
shouldAnimate
(可空)
boolean

滚动过程是否使用动画

freezeScroll([shouldFreeze])

禁止视图的x,y滚动。

参数 类型 说明
shouldFreeze
(可空)
boolean

设置true/false阻止允许滚动

  • 返回: object 如果禁止滚动视图。

freezeAllScrolls([shouldFreeze])

禁止全局视图的x,y滚动。

参数 类型 说明
shouldFreeze
(可空)
boolean

设置true/false阻止允许滚动

getScrollView()

  • 返回: object获得与之关联的视图对象。

$getByHandle(handle)

获得滚动条句柄。

参数 类型 说明
handle string
  • 返回: delegateInstance与'delegate-handle'匹配的句柄,用于控制滚动条。

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