Ионная бесконечная прокрутка в обратном направлении

Я разрабатываю приложение для ионного чата, реализующее бесконечную прокрутку по ng-repeat для обработки ленивой загрузки. Проблема следующая: бесконечная прокрутка начинается сверху (показывает первые самые старые чаты) и обрабатывает ленивую загрузку, когда пользователь прокручивает нижнюю часть, чтобы показать новейший чат. Мне нужна обратная логика, чтобы показывать первый последний чат, и когда пользователь прокручивает вверх, в представлении отображаются более старые чаты.

Резюме: мне нужна ионная бесконечная прокрутка, начинающаяся с нижней позиции, и когда пользователь прокручивает вверх, в представлении отображаются самые старые чаты.


ionic-framework angularjs ionic-v1
person ElLoko36    schedule 31.08.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я нашел несколько примеров, которые могут помочь вам начать работу. скрипт js и аналогичный вопрос

Ниже приведен код из скрипки, я его не создавал.

function Main($scope) {
    $scope.items = [];

    var counter = 0;
    $scope.loadMore = function() {
        for (var i = 0; i < 5; i++) {
            $scope.items.unshift({id: counter});
            counter += 10;
        }
    };

    $scope.loadMore();
}

angular.module('scroll', []).directive('whenScrolled', ['$timeout', function($timeout) {
    return function(scope, elm, attr) {
        var raw = elm[0];

        $timeout(function() {
            raw.scrollTop = raw.scrollHeight;          
        });         

        elm.bind('scroll', function() {
            if (raw.scrollTop <= 100) { // load more items before you hit the top
                var sh = raw.scrollHeight
                scope.$apply(attr.whenScrolled);
                raw.scrollTop = raw.scrollHeight - sh;
            }
        });
    };
}]);

и HTML-код

<div id="fixed" when-scrolled="loadMore()">
  <ul>
    <li ng-repeat="i in items">{{i.id}}</li>
  </ul>  
</div>
person Axar    schedule 31.08.2018

arrow_upward
0
arrow_downward

Простое решение, работает в Ionic 4:

1.) Переверните ваш полный список сообщений в вашем component.ts с помощью javascript .reverse(). Затем вы можете выполнить с ним всю логику Ion-Infinite-Scroll.

2.) При отображении списка сообщений в Html с помощью * ng, чтобы снова перевернуть его (например, *ngFor=let message of messages.inverse())

3.) Поместите position="top" в свой <ion-infinite-scroll>

person Mi Be    schedule 19.10.2019