1. 程式人生 > >ionic中的關於下拉重新整理

ionic中的關於下拉重新整理

允許你新增下拉重新整理滾動檢視。

把它作為ionContentionScroll元素的第一個子元素。

當重新整理完成時,從你的控制器中廣播($broadcast)出 'scroll.refreshComplete'事件。

ion-scroll建立一個包含所有內容的可滾動容器。

建立一個包含所有內容的可滾動容器。

當用戶到達頁尾或頁尾附近時,ionInfiniteScroll指令允許你呼叫一個函式 。

當用戶滾動的距離超出底部的內容時,就會觸發你指定的on-infinite

當沒有更多資料載入時,就可以用一個簡單的方法阻止無限滾動,那就是angular的ng-if 指令:

$ionicScrollDelegate

該方法直接被$ionicScrollDelegate服務觸發,來控制所有滾動檢視。用 $getByHandle方法控制特定的滾動檢視。

方法

resize()

告訴滾動檢視重新計算它的容器大小。

scrollTop([shouldAnimate])

引數 型別 詳情
shouldAnimate (可選) 布林值

是否應用滾動動畫。

scrollBottom([shouldAnimate])

引數 型別 詳情
shouldAnimate (可選) 布林值

是否應用滾動動畫。

scrollTo(left, top, [shouldAnimate])

引數 型別 詳情
left 數值

水平滾動的值。

top 數值

垂直滾動的值。

shouldAnimate (可選) 布林值

是否應用滾動動畫。

scrollBy(left, top, [shouldAnimate])

引數 型別 詳情
left 數值

水平滾動的偏移量。

top 數值

垂直滾動的偏移量。

shouldAnimate (可選) 布林值

是否應用滾動動畫。

getScrollPosition()

  • 返回: 物件 滾動到該檢視的位置,具有一下屬性:
    • {數值} left 從左側到使用者已滾動的距離(開始為 0)。
    • {數值} top 從頂部到使用者已滾動的距離 (開始為 0)。

anchorScroll([shouldAnimate])

告訴滾動檢視用一個帶有id的滾動元素匹配window.location.hash。

如果沒有匹配到元素,它會滾動到頂部。

引數 型別 詳情
shouldAnimate (可選) 布林值

是否應用滾動動畫。

getScrollView()

  • 返回: 物件 匹配具有授權的滾動檢視。

rememberScrollPosition(id)

當滾動檢視被銷燬時(使用者離開頁面),頁面最後的滾動位置會被指定的索引儲存。

注意:根據一個ion-nav-view將頁面和一個檢視關聯,rememberScrollPosition自動儲存它們的滾動。

相關方法:scrollToRememberedPosition, forgetScrollPosition (低)。

在下面的例子中,ion-scroll元素的滾動位置會被保留, 甚至當使用者切換開關時。

<ion-toggle ng-model="shouldShowScrollView"></ion-toggle>
<ion-scroll delegate-handle="myScroll" ng-if="shouldShowScrollView">
  <div ng-controller="ScrollCtrl">
    <ion-list>
      <ion-item ng-repeat="i in items">{{i}}</ion-item>
    </ion-list>
  </div>
</ion-scroll>
function ScrollCtrl($scope, $ionicScrollDelegate) {
  var delegate = $ionicScrollDelegate.$getByHandle('myScroll');

  // 這裡可以放任何唯一的ID。重點是:要在每次重新建立控制器時
  // 我們要載入當前記住的滾動值。
  delegate.rememberScrollPosition('my-scroll-id');
  delegate.scrollToRememberedPosition();
  $scope.items = [];
  for (var i=0; i<100; i++) {
    $scope.items.push(i);
  }
}
引數 型別 詳情
id 字串

保留已滾動位置的滾動檢視的id。

forgetScrollPosition()

停止儲存這個滾動檢視的滾動位置。

scrollToRememberedPosition([shouldAnimate])

如果這個滾動檢視有個和它的滾動位置關聯的id(通過呼叫rememberScrollPosition方法),然後記住那個位置,載入那個位置然後滾動到那個位置。

引數 型別 詳情
shouldAnimate (可選) 布林值

是否應用滾動動畫。

$getByHandle(handle)

引數 型別 詳情
handle 字串
  • 返回: delegateInstance一個代表性例項就是隻控制帶有delegate-handle的滾動檢視來匹配給定的控制代碼。
例如: $ionicScrollDelegate.$getByHandle('my-handle').scrollTop();