$ionicScrollDelegate
授权控制滚动视图(通过ionContent
和 ionScroll
指令创建)。
该方法直接被$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();