Scrolling through "endless" set of images

How-to Discussions
1

I need to scroll through an “endless” set of images (representing e.g. movies or tv-programmes). My code basically looks like this:

<ScrollView LayoutMode="PreserveVisual">
    <WrapPanel FlowDirection="LeftToRight">
        <Each Items="{data}" Offset={offset} Limit="16">
            <Image Url="{image}" MemoryPolicy="UnloadUnused"/>
        </Each>
    </WrapPanel>
    <Scrolled To="End" Within="200" Handler="{moveOffset}" />
</ScrollView>

function moveOffset() { offset.value += 4; }

… inspired by our chat on Slack. This is done so I don’t run out of memory, which would happen pretty quickly if I just scrolled through the entire dataset.

Doing the above will make the contents of the images jump exactly one row (4 images) when moveOffset() is called. While PreserveVisual makes the rows stay in place, it still does offsets the contents of the rows, which I somehow need to fix.

Any ideas on how to do this properly?

2

Let’s see that full reproduction as agreed on Slack. Also, when posting it, could you explain what do you mean by “still does offsets the contents of the rows”? Maybe illustrate the problem with a screenshot?

3

Hi booster,

here’s a complete ready-to-run example of what I think you were looking for:

<App>
    <JavaScript>
    var Observable = require("FuseJS/Observable");

    var images = ["eWFdaPRFjwE","_FjegPI89aU","_RBcxo9AU-U","PQvRco_SnpI","6hxvm0NzYP8","b-yEdfrvQ50","pHANr-CpbYM","45FJgZMXCK8","9wociMvaquU","tI_Odb7ZU6M"];
    var data = Observable();
    var offset = Observable(0);
    var limit = 16;

    // prepare the list of image urls, in total there will be 100
    for (var i = 0; i < 10; i++) {
        var arr = [];
        images.forEach(function(x) {
            arr.push({image: "https://source.unsplash.com/" + x + "/187x220"});
        });
        data.addAll(arr);
    }

    function increaseOffset() {
        if (data.length >= offset.value + 4 - limit) {
            offset.value += 4;
        }
        console.log("offset increased to: " + offset.value);
    }

    function decreaseOffset() {
        if (offset.value-4 >= 0) {
            offset.value -= 4;
        }
        console.log("offset decreased to: " + offset.value);
    }

    module.exports = {
        data: data,
        offset: offset,
        limit: limit,
        increaseOffset: increaseOffset,
        decreaseOffset: decreaseOffset
    };
    </JavaScript>

    <ScrollView LayoutMode="PreserveVisual">
        <WrapPanel FlowDirection="LeftToRight">
            <Each Items="{data}" Offset="{offset}" Limit="{limit}">
                <Image Url="{image}" MemoryPolicy="UnloadUnused" />
            </Each>
        </WrapPanel>
        <Scrolled To="Start" Within="200" Handler="{decreaseOffset}" />
        <Scrolled To="End" Within="200" Handler="{increaseOffset}" />
    </ScrollView>

</App>
4

This was also what I had implemented and trying your example out convinced me that it works - thanks! It turned out I had something at the top of the scrollview (before the <Each>) and that was what caused the jumping…