ionic 滚动条
ion-scroll
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
(可选)
|
字符串
|
该句柄利用 |
|
direction
(可选)
|
字符串
|
滚动的方向。 'x' 或 'y'。 默认 'y'。 |
|
paging
(可选)
|
布尔值
|
分页是否滚动。 |
|
on-refresh
(可选)
|
表达式
|
调用下拉刷新， 由 |
|
on-scroll
(可选)
|
表达式
|
当用户滚动时触发。 |
|
scrollbar-x
(可选)
|
布尔值
|
是否显示水平滚动条。默认为false。 |
|
scrollbar-y
(可选)
|
布尔值
|
是否显示垂直滚动条。默认为true。 |
|
zooming
(可选)
|
布尔值
|
是否支持双指缩放。 |
|
min-zoom
(可选)
|
整数
|
允许的最小缩放量（默认为0.5） |
|
max-zoom
(可选)
|
整数
|
允许的最大缩放量（默认为3） |
实例
HTML 代码
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 5000px; height: 5000px; background: url('http://www.liyinzhu.com/try/demo_source/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>
CSS 代码
body {
cursor: url('http://www.liyinzhu.com/try/demo_source/finger.png'), auto;
}
JavaScript 代码
angular.module('ionicApp', ['ionic']);
ion-infinite-scroll
当用户到达页脚或页脚附近时，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
授权控制滚动视图（通过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
(可选)
|
布尔值
|
是否应用滚动动画。 |
王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat王皓
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat