# 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(可選)`:`字符串`
該句柄利用`$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 代碼
```
<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(可選)`:`布爾值`
是否應用滾動動畫。
- ionic 入門
- ionic 簡介
- ionic 安裝
- ionic 創建 APP
- ionic CSS
- ionic 頭部與底部
- ionic 按鈕
- ionic 列表
- ionic 卡片
- ionic 表單和輸入框
- ionic Toggle(切換開關)
- ionic 單選框
- ionic Range
- ionic select
- ionic tab(選項卡)
- ionic 網格(Grid)
- ionic 顏色
- ionic icon(圖標)
- ionic JavaScript
- ionic 上拉菜單(ActionSheet)
- ionic 背景層
- ionic 下拉刷新
- ionic 復選框
- ionic 單選框操作
- ionic 切換開關操作
- ionic 手勢事件
- ionic 頭部和底部
- ionic 列表操作
- ionic 加載動作
- ionic 模型
- ionic 導航
- ionic 平臺
- ionic 浮動框
- ionic 對話框
- ionic 滾動條
- ionic 側欄菜單
- ionic 滑動框
- ionic 加載動畫
- ionic 選項卡欄操作