ion-scroll 用于创建一个可滚动的容器。
| <ion-scroll |
| [delegate-handle=""] |
| [direction=""] |
| [paging=""] |
| [on-refresh=""] |
| [on-scroll=""] |
| [scrollbar-x=""] |
| [scrollbar-y=""] |
| [zooming=""] |
| [min-zoom=""] |
| [max-zoom=""]> |
| ... |
| </ion-scroll> |
| 属性 | 类型 | 详情 |
|---|---|---|
|
delegate-handle
(可选)
|
字符串
|
该句柄利用 |
|
direction
(可选)
|
字符串
|
滚动的方向。 'x' 或 'y'。 默认 'y'。 |
|
paging
(可选)
|
布尔值
|
分页是否滚动。 |
|
on-refresh
(可选)
|
表达式
|
调用下拉刷新， 由 |
|
on-scroll
(可选)
|
表达式
|
当用户滚动时触发。 |
|
scrollbar-x
(可选)
|
布尔值
|
是否显示水平滚动条。默认为false。 |
|
scrollbar-y
(可选)
|
布尔值
|
是否显示垂直滚动条。默认为true。 |
|
zooming
(可选)
|
布尔值
|
是否支持双指缩放。 |
|
min-zoom
(可选)
|
整数
|
允许的最小缩放量（默认为0.5） |
|
max-zoom
(可选)
|
整数
|
允许的最大缩放量（默认为3） |
| <ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px"> |
| <div style="width: 5000px; height: 5000px; background: url('http://www.web3.xin/try/demo_source/Europe_geological_map-en.jpg') repeat"></div> |
| </ion-scroll> |
| body { |
| cursor: url('http://www.web3.xin/try/demo_source/finger.png'), auto; |
| } |
| angular.module('ionicApp', ['ionic']); |
当用户到达页脚或页脚附近时，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(); |
| }); |
| } |
| <ion-infinite-scroll |
| ng-if="moreDataCanBeLoaded()" |
| icon="ion-loading-c" |
| on-infinite="loadMoreData()"> |
| </ion-infinite-scroll> |
| 属性 | 类型 | 详情 |
|---|---|---|
| on-infinite |
表达式
|
当滚动到底部时触发的事件。 |
|
distance
(可选)
|
字符串
|
从底部滚动到触发on-infinite表达式的距离。默认: 1%。 |
|
icon
(可选)
|
字符串
|
当加载时显示的图标。默认: 'ion-loading-d'。 |
授权控制滚动视图（通过ion-content 和 ion-scroll指令创建）。
该方法直接被$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(); |
| }; |
| } |
| resize() |
| scrollTop([shouldAnimate]) |
| 参数 | 类型 | 详情 |
|---|---|---|
|
shouldAnimate
(可选)
|
布尔值
|
是否应用滚动动画。 |
| scrollBottom([shouldAnimate]) |
| 参数 | 类型 | 详情 |
|---|---|---|
|
shouldAnimate
(可选)
|
布尔值
|
是否应用滚动动画。 |
