ionic中的關於下拉重新整理
阿新 • • 發佈:2019-01-08
允許你新增下拉重新整理滾動檢視。
把它作為ionContent
或ionScroll
元素的第一個子元素。當重新整理完成時,從你的控制器中廣播($broadcast
)出 'scroll.refreshComplete'事件。
ion-scroll建立一個包含所有內容的可滾動容器。
建立一個包含所有內容的可滾動容器。當用戶到達頁尾或頁尾附近時,ionInfiniteScroll指令允許你呼叫一個函式 。
當用戶滾動的距離
超出底部的內容時,就會觸發你指定的on-infinite
。
當沒有更多資料載入時,就可以用一個簡單的方法阻止無限滾動,那就是angular的ng-if
指令:
$ionicScrollDelegate
方法
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();