Ion-scroll
The 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>
?
HTML Code
< ion-scroll zooming = "true" direction = "XY" style > < div style ></ div > </ ion-scroll >
CSS Code
{ cursor: url (' http://www.runoob.com/try/demo_source/finger.png '), Auto;}
JavaScript Code
Angular.module (' Ionicapp ', [' Ionic ']);
Ion-infinite-scroll
The ioninfinitescroll directive allows you to invoke a function when the user arrives near the footer or footer.
The on-infinite you specify is triggered when the user scrolls farther than the content at the bottom.
<ng-controller= "Mycontroller"> < Ion-infinite-scroll on-infinite= "Loadmore ()" distance= "1%" > </ion-infinite-scroll> </ Ion-content>
function Mycontroller ($scope, $http) { = []; function () { $http. Get ('/more-items '). Success (function(items) { useitems (items); $scope. $broadcast (' scroll.infinitescrollcomplete ') ;}; $scope. $on (function() { $scope. Loadmore (); });}
When no more data is loaded, there is a simple way to block infinite scrolling, which is the angular ng-if command:
< Ion-infinite-scroll ng-if = "moredatacanbeloaded ()" icon= "Ion-loading-c" on-infinite= "Loadmoredata ()"> </ion-infinite-scroll>
?
$ionicScrollDelegate
Authorization Controls the scrolling view (created by ion-content and Ion-scroll directives).
This method is triggered directly by \ (Ionicscrolldelegate service) to control all scrolling views. Use the \) Getbyhandle method to control a specific scrolling view.
< body ng-controller = "Mainctrl" > < ion-content > < button ng-click = "scrolltop ()" > scroll to the top! </ button > </ ion-content > </ body >
function Mainctrl ($scope, $ionicScrollDelegate) { function() { $ Ionicscrolldelegate.scrolltop (); };}
?
Ionic JS 16: Scroll bar