Load more messages Whatsapp behavior scroll

ionic-v1
1

Hi people!

I have an array of messages which i am limiting to the last 30 elements, when i press “Load more messages” button y change the limit to 50 elements, the problem is that i want the content to stay in the same position of the previous first message and not going to the top again, i want the behaviour like Whatsapp when you load more messages.
Here is the code:

 <ion-view title="Chat" class="messaging-view" >
    <ion-content on-scroll="onScoll()" class="content-stable" delegate-handle="scrollItem">
        <div class="row">
            <button ng-click="showMoreMessages()" class="button button-block button-stable button-small">
                Load more  messages
            </button>
        </div>
        <div ng-repeat="message in messages | limitTo: limit" ng-class="{ other: message.userId == user.id }" class="message">
            <img class="photo" ng-if="message.userId != user.id" ng-src="{{ otherUser.pictureUrl }}">
            <img class="photo" ng-if="message.userId == user.id" ng-src="{{ user.pictureUrl }}">
            <div class="message"><span>{{ message.message }}</span></div>
        </div>
    </ion-content>
    <ion-footer-bar keyboard-attach class="bar-stable item-input-inset">
        <label class="item-input-wrapper">
            <input autofocus-when="isFocus" type="text" placeholder="Type your message..." on-return="sendMessage()" ng-model="data.message" on-focus="inputUp()" on-blur="inputDown()" />
        </label>
        <button class="button button-clear" ng-click="sendMessage()">
            Send
        </button>
    </ion-footer-bar>
</ion-view>

I looked to other posts but without any luck, any good approach?
Thanks!

2

Hi,

Not sure it will help you but on the basis on what I have described in this post: Collection-repeat + ion-infinite-scroll performances on beta 13

I have an unlimited list supporting several thousands records and i’m filling on demand more items in my collection when the user reaches the bottom of the screen.

i have a scope array that is initially empty:

 $scope.libraryItems = [];

in my loadMore() function,I’m making async http call to retrieve more data and just appending additional items when the users reaches the bottom using something like

    // add to the visible collection
    $scope.libraryItems.push(cachedItem);

By doing so and by using collection-repeat instead of ng-repeat (which couldn’t stand over 200 items and offering good scrolling performances) the scrolling is smooth and keeps the good position even when new items are being added and while modifying the collection on demand…

3

Without seeing what’s going on in your controller, it’s hard to say. However, I suspect that you are reloading a new set of 50 messages when showMoreMessages() is clicked and possibly resetting the $scope.messages to an empty array while waiting on the new data?

If so, the scroll view is going to update because all of a sudden the data is gone and then comes back. In addition, the ng-repeat is going to see all of this as new data.

I’d suggest this:

You ng-repeat needs a track by so that it knows what was already in the list and what is new. Then, it won’t trash the entire DOM and will just put in the stuff that is actually new.

<div ng-repeat="message in messages | limitTo: limit track by message.id" ng-class="{ other: message.userId == user.id }" class="message">

I’m assuing there is in fact a message.id. If not, find something unique in each message for ng-repeat to safely track on.

4

Hi both!

I am loding all the messages first and then limit to only show the last 30 with limitTo. When i call showMoreMessages() i changed the limit value to show 50 instead of 30 and so on.

What i need is that the scroll remains showing the messages number 30 and only if i scroll to the top show me the new messages. The behaviour right now is that when i show more messages the scroll stay on top!

5

Did you ever figure out a solution? I’m having the same problem right now. I don’t feel like I can use collection-repeat because my elements have varying height. I feel like at this point I’m going to have to do something like $ionicScrollDelegate.scrollTo(0, newScollHeight - oldScrollHeight, false); after increasing the limit value of my ng-repeat.

6

Yes!, i am doing like this:

$scope.showMoreMessages = function() {
        $scope.limit-=20;
        $location.hash(20);
        $ionicScrollDelegate.$getByHandle('content').resize();
        $ionicScrollDelegate.$getByHandle('content').anchorScroll();
    };

And in the view:

div.message(id="{{ $index }}", ng-repeat="message in messages | limitTo: limit")