Question

我正在开发一个离子聊天应用程序，该程序在ng-repeat上实现无限滚动以处理延迟负载。接下来的问题是：无限滚动从视图顶部开始（显示最早的聊天记录），并在用户滚动到底部以显示最新聊天记录时处理延迟加载。我需要反逻辑来显示最后一个聊天，并且当用户向上滚动时，该视图将显示较早的聊天。

恢复：我需要离子无限滚动从底部开始，并且当用户向上滚动时，视图显示最早的聊天记录。

Answer 1

我找到了一些可以帮助您入门的示例。 js fiddle和 similar question

下面是小提琴中的代码，我没有创建它。

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>

Answer 2

简单的解决方案，可在Ionic 4中使用：

1。）使用JavaScript的component.ts反转.reverse()中的完整消息列表。然后，您可以对其执行所有的离子无限滚动逻辑。

2。）在带有* ngFor的Html中显示消息列表时，再次将其反转（例如*ngFor=let message of messages.inverse()）

3。）将position="top"放在<ion-infinite-scroll>内

离子无限滚动反方向

2 个答案: