ionic 捲軸


ion-scroll

ion-scroll  用來建立一個可捲動的容器。

用法

<ion-scroll
	[delegate-handle=""]
	[direction=""]
	[paging=""]
	[on-refresh=""]
	[on-scroll=""]
	[scrollbar-x=""]
	[scrollbar-y=""]
	[zooming=""]
	[min-zoom=""]
	[max-zoom=""]>
	...
</ion-scroll>

API

##詳情delegate-handledirectionpagingon-refreshon-scrollscrollbar-x##布林值是否顯示水平捲軸。預設為false。 scrollbar-yzooming(選用)min-zoom
#屬性類型
(可選)
字串#該句柄利用

$ionicScrollDelegate指定捲動視圖。

(可選)
字串#滾動的方向。 'x' 或 'y'。 預設 'y'。

(可選)
#布林值分頁是否捲動。

(可選)
表達式呼叫下拉刷新， 由

ionRefresher觸發。

(可選)
表達式 #當使用者捲動時觸發。

(可選)

(可選)
##布林值		是否顯示垂直捲軸。預設為true。

布林值		 ##是否支援雙指縮放。

(可選)
整數

#允許的最小縮放量（預設為0.5）
#max-zoom(可選)
 整數

允許的最大縮放量（預設為3）

實例

HTML 程式碼

<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
	<div style="width: 5000px; height: 5000px; background: url('../style/images/Europe_geological_map-en.jpg') repeat"></div>
</ion-scroll>

CSS 程式碼

body {
  cursor: url('../style/images/finger.png'), auto;
}

JavaScript 程式碼

angular.module('ionicApp', ['ionic']);

ion-infinite- scroll

當使用者到達頁尾或頁尾附近時，ionInfiniteScroll指令允許你呼叫一個函數。

當使用者捲動的距離超出底部的內容時，就會觸發你指定的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();
  });
}

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

<ion-infinite-scroll
  ng-if="moreDataCanBeLoaded()"
  icon="ion-loading-c"
  on-infinite="loadMoreData()">
</ion-infinite-scroll>

API 屬性類型詳情
##on- infinite表達式

當捲動到底部時觸發的事件。

distance
(可選)

#從底部捲動到觸發on-infinite表達式的距離。預設: 1%。

icon
(可選)
#字串

當載入時顯示的圖示。預設: 'ion-loading-d'。

#

$ionicScrollDelegate

授權控制滾動視圖（透過ion-content 和 ion-scroll指令建立）。

此方法直接被$ionicScrollDelegate服務觸發，來控制所有捲動視圖。用 $getByHandle方法控制特定的滾動視圖。

用法

<body ng-controller="MainCtrl">
  <ion-content>
    <button ng-click="scrollTop()">滚动到顶部!</button>
  </ion-content>
</body>
function MainCtrl($scope, $ionicScrollDelegate) {
  $scope.scrollTop = function() {
    $ionicScrollDelegate.scrollTop();
  };
}

方法

resize()

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

scrollTop([shouldAnimate])
參數類型#詳情
shouldAnimate
(可選)
布林值

是否套用捲動動畫。 

scrollBottom([shouldAnimate])
參數類型詳情

###############################都###########shouldAnimate######(可選)###############布林值########### #是否套用滾動動畫。 ##################