Jerky scrolling with ng-repeat but smooth scrolling with collection-repeat

ionic-v1
1

Hi,

I have my HTML set up like this:

    <ion-content scroll="true">
      <ion-refresher pulling-text="Pull to refresh!" on-refresh="doRefresh()">
      </ion-refresher>
      <ion-list>
          
          <ion-item class="card" ng-repeat="post in posts">
            <div class="item-body">
              <h2>{{post.title}}</h2>
              <img ng-if="post.image!=''" class="full-image" ng-src="{{post.image}}">
              <p>
                {{post.message}}
              </p>
              <p>
                <i class="icon ion-chatbox"></i>
                {{post.date | date: 'd. MMM, HH:mm'}} von {{post.sender}}
              </p>
            </div>
          </ion-item>

      </ion-list>
    </ion-content>

This shows a list of posts. When I remove the refresher part scrolling works fine and feels native. When I add the refresher scrolling becomes laggy and does not work well at all. What I noticed is that if I replace ng-repeat with collection-repeat scrolling becomes smooth again.

Sadly I can’t keep on using collection-repeat since I cant predict the height of my list elements. Is this maybe a bug or am I doing something wrong?

I also tried removing cards and images, scrolling still is bad.

Any help appreciated.

2

Any chance you can throw this in a codepen? I can load it on a device and see what we can do

3

+1 to this. I have a similar setup, ng-repeat is jerky when the images scroll past. I’d like to use collection-repeat, but it looks like you have to tell the directive the height of each item. However, what if you had different heights for each item in collection-repeat? For instance, a list of posts that have different lengths of text.

4

You could in almost any case create a “preview” post with a show more option on click of the item, showing a modal with the post in it… But then what about posts with smaller posts then the maximum of the preview… Yeah, the problem is one I encountered as well :wink:

5

I got around the height issue by having all elements be the same height and adding an ellipses if there’s more then x characters. Not 100% perfect but it’s better then just ng-repeat.

6

The ideal way for this would be for the getHeightFunction ( you can pass a function in the height of ion-collection) to calculate it for each element.
Two issues :

  1. Performance wise I have no idea if that’s ok
  2. As stated in another post ion-collection-repeat seems to be “applied” before the rendering and thus the element are not loaded yet ( undefined )
7

Yeah I thought about that too. I’d love to hear from an Ionic dev about this issue.

8

I’d like to hear about a possible solution too. Making elements the same height is not always possible (i.e. some elements have images and some don’t, for me at least).

9

Hello Ionic? You here?

10

Hey there yall.

So if we look at the collection repeat demo, we can see that you can make items dynamic.

So if the item has a image, render it this size, if not, render this size. If it’s a different type of item, make it this size.

You’re in the right direction of getHeightFunction, but make use of json keys.

  $scope.getItemHeight = function(item) {    
    if(item.hasImage) {
      return 100
    } else if (item.isLetter) {
      return 50
    } else {
      return 80 
   }
  };
11

How about an instance where you don’t know the height it should be? For instance, a list of paragraphs of varying lengths. Some could span 3 lines, some 4, others 5. Is the only solution to truncate the text to the same length and have a “View More” button?

As a better example, how could you implement a facebook like app with collection-repeat?

12

I would do just that, truncate text to set a max limit and include a view more option. I can work on a more in-depth example later on this week during my 7 hour flight…

13

I’ve been wondering about this, what if a “post” has only 3 characters instead of specified 3 rows of text? I would obviously not want to display a wide open space, this is valuable screen estate… I can see why it works as it works, and can’t really think about a way to achieve the same goal differently (In my custom project before I discovered ionic I had a similair way of scrolling implemented, although collection-repeat is 10.000 times more awesome)

But… It would be nice if ionic would have some way of helper function which works by specifying font size and padding etc and help to calculate the height of an “text” so we could use this. The number of characters/words or the text itself would be easy to supply for this helper function.

14

Or you could use flex box and center the text vertically.

15

I’d like to know how to use collection-repeat for a list of facebook posts where each post varies in height, had varying lengths of text, and varying image heights. That’d be fantastic :slight_smile: