ion-scroll
授權(quán): $ionicScrollDelegate
創(chuàng)建一個(gè)包含所有內(nèi)容的可滾動(dòng)容器。
用法
<ion-scroll
[delegate-handle=""]
[direction=""]
[paging=""]
[on-refresh=""]
[on-scroll=""]
[scrollbar-x=""]
[scrollbar-y=""]
[zooming=""]
[min-zoom=""]
[max-zoom=""]>
...
</ion-scroll>
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| delegate-handle(可選) | 字符串 | 該句柄利用$ionicScrollDelegate指定滾動(dòng)視圖。 |
| direction(可選) | 字符串 | 滾動(dòng)的方向。 'x' 或 'y'。 默認(rèn) 'y'。 |
| paging(可選) | 布爾值 | 分頁(yè)是否滾動(dòng)。 |
| on-refresh(可選) | 表達(dá)式 | 調(diào)用下拉刷新， 由ionRefresher觸發(fā)。 |
| on-scroll(可選) | 表達(dá)式 | 當(dāng)用戶滾動(dòng)時(shí)觸發(fā)。 |
| scrollbar-x(可選) | 布爾值 | 是否顯示水平滾動(dòng)條。默認(rèn)為false。 |
| scrollbar-y(可選) | 布爾值 | 是否顯示垂直滾動(dòng)條。默認(rèn)為true。 |
| zooming(可選) | 布爾值 | 是否支持雙指縮放。 |
| min-zoom(可選) | 整數(shù) | 允許的最小縮放量（默認(rèn)為0.5） |
| max-zoom(可選) | 整數(shù) | 允許的最大縮放量（默認(rèn)為3） |
ion-infinite-scroll
隸屬于ionContent 或 ionScroll
當(dāng)用戶到達(dá)頁(yè)腳或頁(yè)腳附近時(shí)，ionInfiniteScroll指令允許你調(diào)用一個(gè)函數(shù) 。
當(dāng)用戶滾動(dòng)的距離超出底部的內(nèi)容時(shí)，就會(huì)觸發(fā)你指定的on-infinite。
用法
<ion-content ng-controller="MyController">
<ion-infinite-scroll
on-infinite="loadMore()"
distance="1%">
</ion-infinite-scroll>
</ion-content>
function MyController($scope, $http) {
$scope.items = [];
$scope.loadMore = function() {
$http.get('/more-items').success(function(items) {
useItems(items);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.$on('stateChangeSuccess', function() {
$scope.loadMore();
});
}
當(dāng)沒(méi)有更多數(shù)據(jù)加載時(shí)，就可以用一個(gè)簡(jiǎn)單的方法阻止無(wú)限滾動(dòng)，那就是angular的ng-if 指令:
<ion-infinite-scroll
ng-if="moreDataCanBeLoaded()"
icon="ion-loading-c"
on-infinite="loadMoreData()">
</ion-infinite-scroll>
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| on-infinite | 表達(dá)式 | 當(dāng)滾動(dòng)到底部時(shí)觸發(fā)的時(shí)間。 |
| distance(可選) | 字符串 | 從底部滾動(dòng)到觸發(fā)on-infinite表達(dá)式的距離。默認(rèn): 1%。 |
| icon(可選) | 字符串 | 當(dāng)加載時(shí)顯示的圖標(biāo)。默認(rèn): 'ion-loading-d'。 |
$ionicScrollDelegate
授權(quán)控制滾動(dòng)視圖（通過(guò)ionContent
和 ionScroll
指令創(chuàng)建）。
該方法直接被$ionicScrollDelegate服務(wù)觸發(fā)，來(lái)控制所有滾動(dòng)視圖。用 $getByHandle方法控制特定的滾動(dòng)視圖。
用法
<body ng-controller="MainCtrl">
<ion-content>
<button ng-click="scrollTop()">滾動(dòng)到頂部!</button>
</ion-content>
</body>
function MainCtrl($scope, $ionicScrollDelegate) {
$scope.scrollTop = function() {
$ionicScrollDelegate.scrollTop();
};
}
高級(jí)用法的例子，用帶有兩個(gè)滾動(dòng)區(qū)域的delegate-handle來(lái)特殊控制。
<body ng-controller="MainCtrl">
<ion-content delegate-handle="mainScroll">
<button ng-click="scrollMainToTop()">
滾動(dòng)內(nèi)容到頂部!
</button>
<ion-scroll delegate-handle="small" style="height: 100px;">
<button ng-click="scrollSmallToTop()">
滾動(dòng)小區(qū)域到頂部!
</button>
</ion-scroll>
</ion-content>
</body>
function MainCtrl($scope, $ionicScrollDelegate) {
$scope.scrollMainToTop = function() {
$ionicScrollDelegate.$getByHandle('mainScroll').scrollTop();
};
$scope.scrollSmallToTop = function() {
$ionicScrollDelegate.$getByHandle('small').scrollTop();
};
}
方法
resize()
告訴滾動(dòng)視圖重新計(jì)算它的容器大小。
scrollTop([shouldAnimate])
| 參數(shù) | 類型 | 詳情 |
|---|---|---|
| shouldAnimate(可選) | 布爾值 | 是否應(yīng)用滾動(dòng)動(dòng)畫。 |
scrollBottom([shouldAnimate])
| 參數(shù) | 類型 | 詳情 |
|---|---|---|
| shouldAnimate(可選) | 布爾值 | 是否應(yīng)用滾動(dòng)動(dòng)畫。 |
scrollTo(left, top, [shouldAnimate])
| 參數(shù) | 類型 | 詳情 |
|---|---|---|
| left | 數(shù)值 | 水平滾動(dòng)的值。 |
| top | 數(shù)值 | 垂直滾動(dòng)的值。 |
| shouldAnimate(可選) | 布爾值 | 是否應(yīng)用滾動(dòng)動(dòng)畫。 |
scrollBy(left, top, [shouldAnimate])
| 參數(shù) | 類型 | 詳情 |
|---|---|---|
| left | 數(shù)值 | 水平滾動(dòng)的偏移量。 |
| top | 數(shù)值 | 垂直滾動(dòng)的偏移量。 |
| shouldAnimate(可選) | 布爾值 | 是否應(yīng)用滾動(dòng)動(dòng)畫。 |
getScrollPosition()
返回: 對(duì)象 滾動(dòng)到該視圖的位置，具有一下屬性：
- {數(shù)值} left 從左側(cè)到用戶已滾動(dòng)的距離(開始為 0)。
- {數(shù)值} top 從頂部到用戶已滾動(dòng)的距離 (開始為 0)。
anchorScroll([shouldAnimate])
告訴滾動(dòng)視圖用一個(gè)帶有id的滾動(dòng)元素匹配window.location.hash。
如果沒(méi)有匹配到元素，它會(huì)滾動(dòng)到頂部。
| 參數(shù) | 類型 | 詳情 |
|---|---|---|
| shouldAnimate(可選) | 布爾值 | 是否應(yīng)用滾動(dòng)動(dòng)畫。 |
getScrollView()
返回: 對(duì)象 匹配具有授權(quán)的滾動(dòng)視圖。
rememberScrollPosition(id)
當(dāng)滾動(dòng)視圖被銷毀時(shí)（用戶離開頁(yè)面），頁(yè)面最后的滾動(dòng)位置會(huì)被指定的索引保存。
注意：根據(jù)一個(gè)ion-nav-view將頁(yè)面和一個(gè)視圖關(guān)聯(lián)，rememberScrollPosition自動(dòng)保存它們的滾動(dòng)。
相關(guān)方法：scrollToRememberedPosition, forgetScrollPosition (低)。
在下面的例子中，ion-scroll元素的滾動(dòng)位置會(huì)被保留， 甚至當(dāng)用戶切換開關(guān)時(shí)。
<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。重點(diǎn)是：要在每次重新創(chuàng)建控制器時(shí)
// 我們要加載當(dāng)前記住的滾動(dòng)值。
delegate.rememberScrollPosition('my-scroll-id');
delegate.scrollToRememberedPosition();
$scope.items = [];
for (var i=0; i<100; i++) {
$scope.items.push(i);
}
}
| 參數(shù) | 類型 | 詳情 |
|---|---|---|
| id | 字符串 | 保留已滾動(dòng)位置的滾動(dòng)視圖的id。 |
forgetScrollPosition()
停止保存這個(gè)滾動(dòng)視圖的滾動(dòng)位置。
scrollToRememberedPosition([shouldAnimate])
如果這個(gè)滾動(dòng)視圖有個(gè)和它的滾動(dòng)位置關(guān)聯(lián)的id（通過(guò)調(diào)用rememberScrollPosition方法），然后記住那個(gè)位置，加載那個(gè)位置然后滾動(dòng)到那個(gè)位置。
| 參數(shù) | 類型 | 詳情 |
|---|---|---|
| shouldAnimate(可選) | 布爾值 | 是否應(yīng)用滾動(dòng)動(dòng)畫。 |
$getByHandle(handle)
| 參數(shù) | 類型 | 詳情 |
|---|---|---|
| handle | 字符串 |
返回: delegateInstance一個(gè)代表性實(shí)例就是只控制帶有delegate-handle
的滾動(dòng)視圖來(lái)匹配給定的句柄。
例如: $ionicScrollDelegate.$getByHandle('my-handle').scrollTop();
