【Ionic】---AngularJS擴展基本佈局

目錄：

1. 標題欄 : ion-header-bar
2. 頁腳欄 : ion-footer-bar
3. header/footer : 樣式及內容
4. 內容區 : ion-content
5. 滾動框 : ion-scroll
6. 拉動刷新 : ion-refresher
7. 滾動刷新 : ion-infinite-scroll
8. 腳本接口 : $ionicScrollDelegate

標題欄 : ion-header-bar

ion-header-bar指令聲明一個標題欄元素，標題欄老是位於屏幕的頂部：

1. <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指令聲明一個頁腳欄元素，頁腳欄老是位於屏幕的底部：

1. <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指令定義內容區域：

1. <ion-content>...</ion-content>

ion-content佔據header和footer之外的剩餘區域。當內容超過可視區域時，ion-content 能夠滾動以顯示被隱藏的部分。

試着滾動右邊示例效果的內容區域，你會發現浮現的滾動條。當滾動中止時，浮動條消失。 這是ionic定製的滾動視圖，可使用overflow-scroll屬性設置使用系統內置的滾動條：

1. <ion-content overflow-scroll="true">...</ion-content>

滾動框 : ion-scroll

ion-scroll指令聲明一個可滾動的容器元素，用戶能夠按住內容進行拖動：

1. <ion-scroll>
2. <!--content-->
3. </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的功能：

1. <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()方法通知框架：

1. $scope.$broadcast("scoll.refreshComplete")

 

例：
<ion-refresher on-refresh="doRefresh()"  pulling-text="鬆開便可刷新..."  refreshing-text="正在更新..." refreshing-icon="ion-loading-c">
</ion-refresher> 

滾動刷新 : ion-infinite-scroll

使用ion-infinite-scroll指令能夠爲滾動容器（ion-scroll或ion-content）增長 滾動刷新功能：

1. <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座標

本文參考：http://www.w2bc.com/Article/33160