ionic 滾動條 · W3School Ionic 教程

# 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(可選)`：`字符串` 該句柄利用`$ionicScrollDelegate`指定滾動視圖。 `direction(可選)`：`字符串` 滾動的方向。 'x' 或 'y'。默認 'y'。 `paging(可選)`：`布爾值` 分頁是否滾動。 `on-refresh(可選)`：`表達式` 調用下拉刷新，由`ionRefresher`觸發。 `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.runoob.com/try/demo_source/Europe_geological_map-en.jpg') repeat"></div> </ion-scroll> ``` ### CSS 代碼 ``` body { cursor: url('http://www.runoob.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(可選)`：`布爾值` 是否應用滾動動畫。