0

ion-infinite-scroll

The ionInfiniteScroll directive allows you to call a function whenever the user gets to the bottom of the page or near the bottom of the page.

The expression you pass in for on-infinite is called when the user scrolls greater than distance away from the bottom of the content. Once on-infinite is done loading new data, it should broadcast the scroll.infiniteScrollComplete event from your controller (see below example).

Usage

In view:

In Controller:

An easy to way to stop infinite scroll once there is no more data to load is to use angular’s ng-if directive:

In view:

In Controller:

API

Attr Type Details
on-infinite expression What to call when the scroller reaches the bottom.
distance

(optional)
string The distance from the bottom that the scroll must reach to trigger the on-infinite expression. Default: 1%.
spinner

(optional)
string The ionSpinner to show while loading. The SVG ionSpinner is now the default, replacing rotating font icons.
icon

(optional)
string The icon to show while loading. Default: ‘ion-load-d’. This is depreicated in favor of the SVG ionSpinner.
immediate-check

(optional)
boolean Whether to check the infinite scroll bounds immediately on load.

 

Prakash S

Prakash S

I would like to introduce myself as a Software professional opting for the career in software industry. I’m Prakash S, a MCA graduate and trained as industry level practice for Software technology. Basically I am a PHP Developer but now days exploring more in HTML5, CSS, AngularJS and jQuery libraries.