Collection-Repeat - items not loading when scrolling upwards

ionic-v1
1

Hi,

the items aren’t displaying quick enough when scrolling upwards (they stay white). I have a special case where there is a “cover div” before the collection-repeat div (I’ve attached a picture).

Here is the code pen. http://codepen.io/jamespacileo/pen/yqsfx

Here is the pic

I reckon there may be some value I can tweak to tell collection-repeat to fill in the elements earlier? Thanks for the help. :smile:

2

Hi, apologies for the plus one.
I’m hoping to get some visibility.

Would it be worth raising a github ticket for customizing the “virtual viewport” of the collection-repeat?

3

I brought up this issue a little while back:

https://github.com/driftyco/ionic/pull/1157#issuecomment-41864075

ajoslin suggested a workaround that I managed to make work, although it’s not the prettiest solution.

The idea is that your “cover div” becomes the 1st item in your collection-repeat, and you use the custom item height function to give the item with index 0 a special size. Here’s a bit of rough code to convey the idea.

<div collection-repeat="thing in things track by thing.id" collection-item-height="getScrollItemHeight(thing, $index)" ng-class="{'thing': $index != 0}">

            <span ng-if="$index == 0">
                <!-- special big cover stuff goes here -->
            </span>

            <span ng-if="$index != 0">
                <!-- normal repeated stuff goes here -->
            </span>
</div>

Then in your controller

$scope.things = ["dummy_for_collection_repeat_cover"].concat(things);

and

$scope.getScrollItemHeight = function(thing, index) {
    if(index == 0) {
        return 500;
    } else {
        return 50;
    }
};

I agree it would be nicer if we could customize the “virtual viewport” somehow but until then, this approach seems to work.

Also, if your cover area is large enough, you may encounter another issue that the devs are working on:

1 Like
4

@udi thanks for the awesome reply!

I was going to give up on this, I’ll try your suggestions out and see how I get on.

As you pointed out in the Github Issue, it’s not pretty and hopefully the guys at ionic will incorporate a better solution.

Any chance you could kindly give me your thoughts on this as well? It’s pretty much related, and hopefully you might have dealt with this one already.

Thanks a ton! :smile: