May 22, 2021 ionic
ion-scroll is used to create a scrollable container.
<ion-scroll [delegate-handle=""] [direction=""] [paging=""] [on-refresh=""] [on-scroll=""] [scrollbar-x=""] [scrollbar-y=""] [zooming=""] [min-zoom=""] [max-zoom=""]> ... </ion-scroll>
Property | Type | Details |
---|---|---|
delegate-handle
(Optional)
|
字符串
|
The handle uses the $ionicScrollDelegate
|
direction
(Optional)
|
字符串
|
The direction of the scroll. ' x' or 'y'. Default 'y'. |
paging
(Optional)
|
布尔值
|
Whether the page is scrolling or not. |
on-refresh
(Optional)
|
表达式
|
Call a pull-down refresh,
|
on-scroll
(Optional)
|
表达式
|
Triggered when the user scrolls. |
scrollbar-x
(Optional)
|
布尔值
|
Whether to display a horizontal scroll bar. The default is false. |
scrollbar-y
(Optional)
|
布尔值
|
Whether to display a vertical scroll bar. True by default. |
zooming
(Optional)
|
布尔值
|
Whether two-finger scaling is supported. |
min-zoom
(Optional)
|
整数
|
Minimum amount of scale allowed (default 0.5) |
max-zoom
(Optional)
|
整数
|
Maximum amount of scaling allowed (default 3) |
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px"> <div style="width: 5000px; height: 5000px; background: url('https://www.W3Cschool.cn/try/demo_source/Europe_geological_map-en.jpg') repeat"></div> </ion-scroll>
body { cursor: url('//www.w3cschool.cn/statics/demosource/finger.png'), auto; }
angular.module('ionicApp', ['ionic']);
The ionInfiniteScroll directive allows you to call a function when the user reaches the footer or near the footer.
When the user scrolls beyond the bottom, the on-infinite you specify is triggered.
<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, there is a simple way to stop infinite scrolling, which is the ng-if instruction of the angular:
<ion-infinite-scroll ng-if="moreDataCanBeLoaded()" icon="ion-loading-c" on-infinite="loadMoreData()"> </ion-infinite-scroll>
Property | Type | Details |
---|---|---|
on-infinite |
表达式
|
The event that is triggered when scrolling to the bottom. |
distance
(Optional)
|
字符串
|
Scroll from the bottom to the distance from which the on-infinite expression is triggered. Default: 1%. |
icon
(Optional)
|
字符串
|
The icon that appears when loaded. Default: 'ion-loading-d'. |
Authorize control of the scroll view (created by the ion-content and ion-scroll instructions).
This method is triggered directly by the $ionicScrollDelegate service to control all scroll views. Use $getByHandle methods to control specific scroll views.
<body ng-controller="MainCtrl"> <ion-content> <button ng-click="scrollTop()">滚动到顶部!</button> </ion-content> </body>
function MainCtrl($scope, $ionicScrollDelegate) { $scope.scrollTop = function() { $ionicScrollDelegate.scrollTop(); }; }
resize()
Tells the scroll view to recalculate its container size.
scrollTop([shouldAnimate])
Parameters | Type | Details |
---|---|---|
shouldAnimate
(Optional)
|
布尔值
|
Whether to apply a scroll animation. |
scrollBottom([shouldAnimate])
Parameters | Type | Details |
---|---|---|
shouldAnimate
(Optional)
|
布尔值
|
Whether to apply a scroll animation. |