Question

我们在项目中创建聊天，并在用户滚动顶部时遇到加载消息的问题。我们需要创建类似无限滚动的东西但是当用户滚动顶部时。我们得到的主要问题是 - 当我们获得新的X消息并将其取消移动到集合时，滚动位置始终位于顶部。在将每个新元素添加到集合后，我们如何保留滚动位置？我们的代码是html中的简单ng-repeat和控制器中的ajax调用。

Html结构：

<div class="messages-view-bg messages-list-container has-footer" ng-class="{'searching' : showSearchBar}" id="userMessagesView" style="height: {{deviceHeight-75}}px">
<div class="row" ng-if="conversation.description !== undefined" style="text-align: center; color: grey">
<p style="width: 100%">{{conversation.description}}</p>
</div>
<div class="conversation-bubble" in-view="$inview && $index == 1 && loadmore()" ng-repeat="message in messages track by $index" id="msg-{{message.id}}">
</div>
{{message.content}}
</div>

加载新消息的方法：

var messageLoader = function(callback){

        $scope.loaderIndicator = true;

        Conversation.loadMessages({}).$promise.then(function(data){

            $scope.loaderIndicator = false;

            if($scope.messages && $scope.messages.length > 0) {
              data.messages.forEach(function (item, index){

                $scope.messages.unshift(item);


              });

              read();

            } else {
              $scope.messages = data.messages;
              read();
            }

            $scope.$broadcast('scroll.refreshComplete');
            isMore = data.messages.length == 30;

            if(firstLoad) {
              isMore = data.messages.length == 30;
            } else {
              isMore = data.messages.length == LOAD_MSG_COUNT;
            }

            $scope.skipCount += LOAD_MSG_COUNT;

            if(firstLoad){
              scrollToBottom();
            }

        });
    }

将新项目添加到角度收集ng-repeat后保留滚动位置

0 个答案: