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-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坐標

 

參考資料：匯  智  網