ion-scroll
创建一个包含所有内容的可滚动容器。
用法
<ion-scroll
[delegate-handle=""]
[direction=""]
[paging=""]
[on-refresh=""]
[on-scroll=""]
[scrollbar-x=""]
[scrollbar-y=""]
[zooming=""]
[min-zoom=""]
[max-zoom=""]>
...
</ion-scroll>
API
| 属性 | 类型 | 详情 |
|---|---|---|
| delegate-handle(可选) | 字符串 | 该句柄利用$ionicScrollDelegate指定滚动视图。 |
| direction(可选) | 字符串 | 滚动的方向。 'x' 或 'y'。 默认 'y'。 |
| paging(可选) | 布尔值 | 分页是否滚动。 |
| on-refresh(可选) | 表达式 | 调用下拉刷新， 由ionRefresher触发。 |
| on-scroll(可选) | 表达式 | 当用户滚动时触发。 |
| scrollbar-x(可选) | 布尔值 | 是否显示水平滚动条。默认为false。 |
| scrollbar-y(可选) | 布尔值 | 是否显示垂直滚动条。默认为true。 |
| zooming(可选) | 布尔值 | 是否支持双指缩放。 |
| min-zoom(可选) | 整数 | 允许的最小缩放量（默认为0.5） |
| max-zoom(可选) | 整数 | 允许的最大缩放量（默认为3） |
ion-infinite-scroll
隶属于ionContent 或 ionScroll
当用户到达页脚或页脚附近时，ionInfiniteScroll指令允许你调用一个函数 。
当用户滚动的距离超出底部的内容时，就会触发你指定的on-infinite。
用法
<ion-content ng-controller="MyController">
<ion-infinite-scroll
on-infinite="loadMore()"
distance="1%">
</ion-infinite-scroll>
</ion-content>
function MyController($scope, $http) {
$scope.items = [];
$scope.loadMore = function() {
$http.get('/more-items').success(function(items) {
useItems(items);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.$on('stateChangeSuccess', function() {
$scope.loadMore();
});
}
当没有更多数据加载时，就可以用一个简单的方法阻止无限滚动，那就是angular的ng-if 指令:
<ion-infinite-scroll
ng-if="moreDataCanBeLoaded()"
icon="ion-loading-c"
on-infinite="loadMoreData()">
</ion-infinite-scroll>
API
| 属性 | 类型 | 详情 |
|---|---|---|
| on-infinite | 表达式 | 当滚动到底部时触发的时间。 |
| distance(可选) | 字符串 | 从底部滚动到触发on-infinite表达式的距离。默认: 1%。 |
| icon(可选) | 字符串 | 当加载时显示的图标。默认: 'ion-loading-d'。 |
$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();
