ionic scrollbar
ion-scroll
ion-scroll is used to create a scrollable container.
usage
<ion-scroll [delegate-handle=""] [direction=""] [paging=""] [on-refresh=""] [on-scroll=""] [scrollbar-x=""] [scrollbar-y=""] [zooming=""] [min-zoom=""] [max-zoom=""]> /en. </ion-scroll>
API
Attributes | Types of | Detail |
---|---|---|
delegate-handle (Optional) | 字符串 | The handle use |
direction (Optional) | 字符串 | The direction of scrolling. 'X' or 'y'. Default 'y'. |
paging (Optional) | 布尔值 | Paging whether scrolling. |
on-refresh (Optional) | 表达式 | Call the drop-down refresh by |
on-scroll (Optional) | 表达式 | Fires when the user scrolls. |
scrollbar-x (Optional) | 布尔值 | Whether to display horizontal scroll bar. The default is false. |
scrollbar-y (Optional) | 布尔值 | Whether to display the vertical scroll bar. The default is true. |
zooming (Optional) | 布尔值 | It supports two-finger zoom. |
min-zoom (Optional) | 整数 | The minimum allowable amount of scaling (default is 0.5) |
max-zoom (Optional) | 整数 | The maximum allowable amount of scaling (default is 3) |
Examples
HTML code
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px"> <div style="width: 5000px; height: 5000px; background: url('/en/try/demo_source/Europe_geological_map-en.jpg') repeat"></div> </ion-scroll>
CSS code
body { cursor: url('/en/try/demo_source/finger.png'), auto; }
JavaScript code
angular.module('ionicApp', ['ionic']);
ion-infinite-scroll
When the user reaches the vicinity of the footer or footer, ionInfiniteScroll command allows you to call a function.
When the user scrolls the distance beyond the bottom of the content, it will trigger you to specify the on-infinite.
usage
<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(); }); }
When no more data is loaded, you can use a simple method to prevent infinite scroll, that is angular in the ng-if command:
<ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMoreData()"> </ion-infinite-scroll>
API
Attributes | Types of | Detail |
---|---|---|
on-infinite | 表达式 | When scrolling in the end portion of the trigger event. |
distance (Optional) | 字符串 | Scroll from the bottom to trigger on-infinite expressions distance. Default: 1%. |
icon (Optional) | 字符串 | Icon is displayed when loading. Default: 'ion-loading-d'. |
$ IonicScrollDelegate
Authorization control the scroll view (created by ion-content and ion-scroll instruction).
The direct method is triggered $ ionicScrollDelegate service to control all of the scroll view. Control specific scroll view with $ getByHandle methods.
usage
<body ng-controller="MainCtrl"> <ion-content> <button ng-click="scrollTop()">滚动到顶部!</button> </ion-content> </body>
function MainCtrl($scope, $ionicScrollDelegate) { $scope.scrollTop = function() { $ionicScrollDelegate.scrollTop(); }; }
method
resize()
Tell scroll view to recalculate its container size.
scrollTop([shouldAnimate])
parameter | Types of | Detail |
---|---|---|
shouldAnimate (Optional) | 布尔值 | Whether to apply scroll animation. |
scrollBottom([shouldAnimate])
parameter | Types of | Detail |
---|---|---|
shouldAnimate (Optional) | 布尔值 | Whether to apply scroll animation. |