Thoughts on Collection Repeat?

1

Does anyone ever use collection repeat when working with huge lists? I like how the performance is improved but scrolling the list is always laggy on android; until we turn off the ionic scroll (overflow-scroll=“true”).

And, when that’s turned off; we can’t use collection repeat anymore :frowning: It’s a trap

Should I stick with Collection repeat; so that my search filter works fine and less resources are spent on redrawing the DOM but scrolling my list will be laggy;

OR

I turn ionic’s scroll off, use the usual ‘ion-list’ and enjoy smooth scrolling on my android but experience lag when filtering through my list?

1 Like
2

Hey there, so scrolling on android has been a constant battle.
So much so that we’ve actually be in the process of converting all of our scrolling components to be able to work with native scrolling.
@perry’s been hard at work making things like PTR, Infinite Scroll, and Collection repeat to work without js scrolling.

This is a feature we intend to have in the next release.
So in short, we know its not perfect, we’re working on it, and we want to make it better :smile:

3 Likes
3

In my app I use Ionic scrolling with Collection-Repeat on iOS, and UI-Scroll (https://github.com/angular-ui/ui-utils/tree/master/modules/scroll) on Android. Combined with Crosswalk for Android for < 4.4.4, it works well and provides Infinite Scroll and Virtual Scrolling. The only things I lose on Android are PTR and a scroll bar.

I’d use UI-Scroll on both platforms just to keep things simple, but there’s a nasty iOS webkit bug where if you touch an item while the list is scrolling, the touch event will fire on the wrong item.

https://devforums.apple.com/message/885616#885616

1 Like
4

@rajatrocks
I’m struggling to use ui-scroll but can’t.
Can you please help me out here?

5

This is what the top of the markup looks like:

            <div class="list" ui-scroll-viewport
                    ng-style="::{'height': getContentHeight()}" id="viewPort" 
                    ng-show="items.length > 0">
                <div class="item post"               
                   ui-scroll="item in uiScroller" 
                   buffer-size="20"
                   padding="0.5"
                   ng-click="showPost(item, $event)"
                   ng-style="::{'height': getPostHeight(item, $index, 'px'),'background-image': 'url(' + item.pictureURL + ')', 'color': item.color, 'background-color': item.backgroundColor}"
                   detect-gestures="swipeleft swiperight"
                   ng-attr-id="post-{{::item.id}}">

getContentHeight and getPostHeight just return the relevant sizes. Here’s an example.

getContentHeight = function() {
            // Tab bar = 49
            // Top header = 44
            // Bottom footer = 44
			return ($window.innerHeight -(49 + 44 + 44)) +  "px";
		};

And then in the controller, there is code like this to implement uiScroller:

	// start at revision 0, then increment every time we need to reload the UI Scroller. 
	var currentRevision = 0;
	var revision = function() {
		return currentRevision;
	};

	// *******************************************
	// Functions for the Angular UI Scroller. 
	// Also used by Ionic Infinite Scroller. 
	$scope.uiScroller = {
		reload: function() {
			currentRevision++;
		},
		get: function(index, count, success) {
			// make it zero-based instead of 1-based.
			index--;

			// If a negative, reset to start of list. 
			if (index < 0) {
				count = count + index;
				index = 0;

				if (count <= 0) {
					success([]);
                    $scope.loadingPosts = false; 
					return;
				}
			}

			// your code

		},
		revision: function() {
			// not required, but code is erroring without it.
			return currentRevision;
		},
		loading: function(value) {
			// Show a loading indicator if we have enough times. 
			if (value) {
				LoadingService.show();
			}
			else {
				LoadingService.hide();
			}
		}
	};