Infinite Scroll

Infinite Scroll is a convenient way to manage big lists of data. It's a kind of pagination system. The app first loads a first set of data. When the user scrolls down and hits the bottom of the page, the app loads the next set of data and shows it at the bottom so that when the user is scrolling down again he will see more and more data.

In Cobalt, Infinite Scroll doesn't work exactly the same as Pull-To-Refresh :

• Cobalt tells the webview that the user has hit the bottom of the page
• The web shows a button or a loader at the bottom of the page and loads the next content
• When content is added, the web should remove its button or spinner and release the controll by calling a method so that the hits on the bottom are detected again.

As you see, Cobalt is not adding a small loader at the end of the page, the web should do it. We should probably enhance this in the future.

Now here is how to use the current version.

Enable Infinite Scroll in cobalt.json

To enable the infinite scroll on a cobalt controller, use the boolean in cobalt.json.

Here is an example :

{
    "controllers": {
        "default": {
            "ios": "ViewController",
            "android": ".MyActivity",
            "infiniteScroll": true
        }
    }
}

For more details on this file, see cobalt.json and navigation.

Handle the message on the web side

Once you have enabled the Infinite Scroll in the config file, the webview will receive a message when the user hits the bottom of the webview.

You will have to :

• catch this message,
• show a spinner or something to the user,
• refresh your content (call a webservice or anything),
• call the dismiss method to release the control.

If you don't do this last step, the next user hits on the bottom of the page won't be detected and the message won't be sent again to the webview.

Here is how you do that, in javascript :

cobalt.subscribe('cobalt:onInfiniteScroll', function(){
	// message is catched! now, add more content to your webpage
	myApp.loadNextContent();
	// then, release the control :
	cobalt.infiniteScroll.dismiss();
});

If your app is calling a webservice to complete its content, be sure to send the callback only when it's over, and add a spinner at the bottom of the page. It will feel more natural for your users, they will see the loading stuff and be happy to have the feedback when it's done.

The Catalog App in the sample directory contains a working example.