ionic 滚动条

---

---

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('http://www.shouce.ren/try/demo_source/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方法控制特定的滚动视图。

用法

  滚动到顶部!  

function MainCtrl($scope, $ionicScrollDelegate) { $scope.scrollTop = function() { $ionicScrollDelegate.scrollTop(); }; }

方法

resize()

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

scrollTop([shouldAnimate])

参数	类型	详情
shouldAnimate (可选)	布尔值	是否应用滚动动画。

scrollBottom([shouldAnimate])

参数	类型	详情
shouldAnimate (可选)	布尔值	是否应用滚动动画。