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.runoob.com/try/demo_source/Europe_geological_map-en.jpg') repeat"></div> </ion-scroll>
CSS 代码
body { cursor: url('http://www.runoob.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
(可选)
|
布尔值 |
是否应用滚动动画。 |
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="http://cdn.bootcss.com/ionic/1.0.1/css/ionic.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/ionic/1.0.1/js/ionic.bundle.min.js"></script>
<script type="text/javascript">
angular.module('ionicApp', ['ionic']);
</script>
<style type="text/css">
body {
cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;
}
</style>
</head>
<body>
<ion-view title="Home" hide-nav-bar="true">
<ion-scroll zooming="true" direction="xy" style=" 500px; height: 500px">
<div style=" 5000px; height: 5000px; background: url('http://www.runoob.com/try/demo_source/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>
</ion-view>
</body>
</html>