目錄：
- 標題欄 : ion-header-bar
- 頁腳欄 : ion-footer-bar
- header/footer : 樣式及內容
- 內容區 : ion-content
- 滾動框 : ion-scroll
- 拉動刷新 : ion-refresher
- 滾動刷新 : ion-infinite-scroll
- 腳本接口 : $ionicScrollDelegate
標題欄 : ion-header-bar
ion-header-bar指令聲明一個標題欄元素，標題欄總是位於屏幕的頂部：
<ion-header-bar>...</ion-header-bar>ion-header-bar指令有兩個可選的屬性：
align-title - 設置標題文字的對齊方式。允許值：left | right | center，分別對應左對齊、 右對齊和居中對齊。no-tap-scroll - 當點擊標題時，是否將內容區域自動滾動到最開始。允許值：true | false，默認爲true。
頁腳欄 : ion-footer-bar
ion-footer-bar指令聲明一個頁腳欄元素，頁腳欄總是位於屏幕的底部：
<ion-footer-bar>…</ion-footer-bar>ion-footer-bar指令有一個可選的屬性：
align-title - 設置標題文本的對齊方式。允許值：left | right | center 。
header/footer : 樣式及內容
ion-header-bar和ion-footer-bar經過編譯後其樣式類將分別被設置爲.bar.bar-header 和.bar.bar-footer，回憶下我們在CSS框架課程中已經瞭解到的內容：
顯然，你可以使用這些樣式調整ion-header-bar/ion-footer-bar的外觀！
內容區 : ion-content
使用ion-content指令定義內容區域：
<ion-content>…</ion-content>ion-content佔據header和footer以外的剩餘區域。當內容超過可視區域時，ion-content 可以滾動以顯示被隱藏的部分。
試着滾動右邊示例效果的內容區域，你會發現浮現的滾動條。當滾動停止時，浮動條消失。 這是ionic定製的滾動視圖，可以使用overflow-scroll屬性設置使用系統內置的滾動條：
<ion-content overflow-scroll=“true”>…</ion-content>
滾動框 : ion-scroll
ion-scroll指令聲明一個可滾動的容器元素，用戶可以按住內容進行拖動：
<ion-scroll><!–content–></ion-scroll>ion-scroll指令有兩個常用的可選屬性：
direction - 內容可以滾動的方向。允許值：x|y|xy。默認爲 y。zooming - 是否支持pinch-to-zoom(捏拉縮放)。允許值：true | false。在使用ion-scroll時，需要顯式指定滾動框元素及內容元素 的大小（高度和寬度）：
拉動刷新 : ion-refresher使用指令ion-refresher可以爲滾動容器（ion-scroll或ion-content）增加 拉動刷新/pull-to-refresh的功能：
<ion-refresher></ion-refresher>ion-refresher指令有以下可選的屬性：
- on-refresh - 當用戶向下拉動足夠的距離並鬆開時，執行此表達式
- on-pulling - 當用戶開始向下拉動時，執行此表達式
- pulling-text - 當用戶向下拉動時，顯示此文本
- pulling-icon - 當用戶向下拉動時，顯示此圖標
- refreshing-icon - 當用戶向下拉動並鬆開後，顯示的等待圖標。ionic推薦使用spinner 代替這個屬性
- spinner - 和refreshing-icon的作用一樣，但spinner是基於SVG的動畫
- disable-pulling-rotation - 禁止下拉圖標旋轉動畫 注意在刷新完畢後，應當使用作用域的$broadcast()方法通知框架：
$scope.$broadcast(“scoll.refreshComplete”)
滾動刷新 : ion-infinite-scroll
使用ion-infinite-scroll指令可以爲滾動容器（ion-scroll或ion-content）增加 滾動刷新功能：
<ion-infinite-scroll on-infinite="">…</ion-infinite-scroll>ion-infinite-scroll指令有如下屬性：
- on-infinite - 必須。當滾動到底部時執行此表達式
- distance - 可選。距底部距離百分比。當距離底部超過此數值時，執行on-infinite。默認爲1%
- icon - 可選。載入時顯示的圖標。默認是ion-load-d。ionic推薦使用spinner代替icon屬性
- spinner - 可選。載入時的spinner。默認是ionSpinner
- immediate-check - 可選。是否在載入時立即檢查滾動框範圍
腳本接口 : $ionicScrollDelegate
可以使用服務$ionicScrollDelegate，通過腳本控制滾動容器（ion-scroll或ion-content）。 $ionicScrollDelegate服務提供的常用方法如下：
-
resize()重新計算容器尺寸。當父元素大小變化時，應當調用此方法
-
scrollTop([shouldAnimate])滾動到內容頂部。shouldAnimate參數爲true|false，表示是否使用動畫展示滾動過程
-
scrollBottom([shouldAnimate])滾動到內容底部。shouldAnimate參數爲true|false，表示是否使用動畫展示滾動過程
-
scrollTo(left,top[,shouldAnimate])滾動到指定位置。left和top分別表示要滾動到的x座標和y座標
-
scrollBy(left,top[,shouldAnimate])滾動指定偏移量。left和top分別表示要滾動的x偏移量和y偏移量
-
getScrollPosition()讀取當前視圖位置。返回值爲一個JSON對象，具有left和top屬性，分別表示x和y座標