How to add infinite scrolling to Fuse tools app

Adding infinite scrolling to Fuse

Recently, we have been playing around with a new tool called Fuse and we wanted to highlight a way we were able to add infinite scrolling to Fuse while building an app.

If you haven’t heard of it, “Fuse is the UX tool suite for app designers and developers”.

In a nutshell, it’s an awesome way to build apps, if you want to target various iOS and Android OS at once, and you don’t want to learn Java and Objective-C (or Swift). Fusetools is in it’s early days so a lot of things still have to be done, but so far so good, we are impressed with the job so far.

Learning new tech isn’t always easy, especially if the new tech is, well, new. However, it can be fun if you have a great community, and Fuse has a Great Community; and if you use Slack, you have an even greater community with over 700 members at the time this article was written.

How to add infinite scrolling to Fuse

We have been using various articles and examples online to figure out and learn fuse tools. However, we were unable to find an article that talks about adding infinite scrolling to Fuse. Infinite scrolling is a trend in design today so we had to figure out a way to add Infinite scrolling to Fuse apps.

We decided to go hunting and we came up with a way to do this. Here’s how we did it:

Using the already existent news feed Fuse example as a base to show how to add infinite scrolling to Fuse. All we will do is change the feed source to something that supports this type of scrolling and add the changes needed to make infinite scrolling our Fuse app possible.

Alright lets go.

Download the existing example

If you haven’t done so, download the example file in the news feed Fuse example we highlighted earlier. This as we said would be our base.

Now that we have the file, let’s get to work. Since this is not a crash course on learning Fuse, I will not be talking specifics.

Getting Dirty

In the Javascript side of things, we do the following:

Add our news feed related variables:

var Observable = require("FuseJS/Observable");

var data = Observable();

// Api source
var apiSrc = 'http://interwebs.com/path/to/api';

// Flag set if the feed is loading for the first time
var loadingNewFeed = Observable(true);

// Flag set if the feed is in the process of loading new data
var appendingData = Observable(false);

// Pagination offset
var paginationOffset = 1;

// Flag set if the feed is loading data
var isBusy = Observable(false);
Now we create and call the fetchData function that...fetches data.

fetchData();

function fetchData(appendData) {
    if (isBusy.value == true || paginationOffset >= 31)
        return;

    isBusy.value = true;

    appendingData.value = appendData;

    fetch( apiSrc + paginationOffset )
    .then(function(response) { return response.json(); })
    .then(function(responseObject) {
        var posts = [], rawPosts;


        if (appendingData.value == true) {
            var items = data.value.items;

            for (var i = 0; i < responseObject.items.length; i++) {
                items.push(responseObject.items[i]);
            };

            responseObject.items = items;

            appendingData.value = false;
        }

        data.value = responseObject;

        isBusy.value = false;

        loadingNewFeed.value = false;

        paginationOffset++; //

 

Now we go ahead and export the variables so that they are available for Fuse markup to use.

module.exports = { 
    dataSource: data, 
    loadingNewFeed: loadingNewFeed,
    appendingData: appendingData, 
    fetchAppendData: function() { 
        fetchData(true) 
    } 
};

 

Now the final thing to do will be to add some stuff to our Fuse markup.

BAM! And we’re done! Fuse makes it look so easy.

You can find the git repository where the entire code is stored here: https://github.com/CreativityKills/Infinite-Scroll-For-Fuse-Example. Have something to add, then leave a comment below.