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-handle
(可選)
|
字串
|
該控制代碼利用 |
direction
(可選)
|
字串
|
滾動的方向。 'x' 或 'y'。 預設 'y'。 |
paging
(可選)
|
布林值
|
分頁是否滾動。 |
on-refresh
(可選)
|
表示式
|
呼叫下拉重新整理, 由 |
on-scroll
(可選)
|
表示式
|
當用戶滾動時觸發。 |
scrollbar-x
(可選)
|
布林值
|
是否顯示水平滾動條。預設為false。 |
scrollbar-y
(可選)
|
布林值
|
是否顯示垂直滾動條。預設為true。 |
zooming
(可選)
|
布林值
|
是否支援雙指縮放。 |
min-zoom
(可選)
|
整數
|
允許的最小縮放量(預設為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('http://www.itread01.com/try/demo_source/Europe_geological_map-en.jpg') repeat"></div> </ion-scroll>
CSS 程式碼
body { cursor: url('http://www.itread01.com/try/demo_source/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
(可選)
|
布林值
|
是否應用滾動動畫。 |