ion-scroll
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） |
实例
HTML 代码
CSS 代码
body {
cursor: url('../style/images/finger.png'), auto;
}JavaScript 代码
angular.module('ionicApp', ['ionic']);
ion-infinite-scroll
当用户到达页脚或页脚附近时，ionInfiniteScroll指令允许你调用一个函数 。
当用户滚动的距离超出底部的内容时，就会触发你指定的on-infinite。
用法
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 指令:
API
| 属性 | 类型 | 详情 |
|---|
| on-infinite | 表达式 | 当滚动到底部时触发的事件。 |
| distance (可选) | 字符串 | 从底部滚动到触发on-infinite表达式的距离。默认: 1%。 |
| icon (可选) | 字符串 | 当加载时显示的图标。默认: 'ion-loading-d'。 |
$ionicScrollDelegate
授权控制滚动视图（通过ion-content 和 ion-scroll指令创建）。
该方法直接被$ionicScrollDelegate服务触发，来控制所有滚动视图。用 $getByHandle方法控制特定的滚动视图。
用法
滚动到顶部!
