javascript - 在 div 内向上滚动时无限滚动

Question

我正在使用 AngularJS 和 Laravel 构建一个聊天系统。

我想使用 AngularJS 在 div 容器内设置一个无限滚动条。我想要的是一个聊天框，当用户点击用户名时，它会显示最近 30 条聊天消息；当用户在容器(而不是浏览器窗口)中向上滚动时，我想运行一个 AJAX 请求并获取之前的 30 条记录，就像我们在 Facebook 聊天应用程序中所做的那样。

这是我的 HTML 代码:

<ul class="chats" ng-repeat="chatData in DataChats">
    <li>
        <div class="message">
            <a> {{chatData.sender_fname }} </a>
            <span class="body"> {{chatData.message }} </span>
        </div>
    </li>
</ul>   

和环形js代码

$scope.showChat = function(chat_id) {
    $http.get(url+'/chat/'+chat_id).success(function(data){
        $scope.DataChats= data;
    });
}   

我已经搜索了 AngularJS 的依赖项，但我只找到了像这样的浏览器 Ng infinite scroll .我怎样才能把容器做成 Facebook like chat when we scroll up and it shows previous messages ？

这是我想要实现的:

Answer 1

此外 ngInfiniteScroll 支持容器的无限滚动(ref)，但我建议使用 ui-scroll .它有更多的能力。 This也会回答你的问题。

您可以使用 ui-scroll-viewport 为容器使用 ui-scroll。

<ANY ui-scroll-viewport>
      ...
</ANY>

这demo源代码为 html & script您只需要一个简单的样本即可。

主要script demo 是在 coffeescript 中，这里是 demo 的 javascript 代码:

angular.module('application', ['ui.scroll', 'ui.scroll.jqlite']).factory('datasource', [
  '$log', '$timeout', function (console, $timeout) {
      var get;
      get = function (index, count, success) {
          return $timeout(function () {

              result = [];
              var i = index;
              for (i; i < index + count - 1 ;i++ ) {
                  result.push("item #" + i);
              }
              return success(result);
          }, 100);
      };
      return {
          get: get
      };
  }
]);
angular.bootstrap(document, ["application"]);

正如文档中提到的，您所要做的就是实现 get 函数。

here ，我为您提供了一个 plunker 来展示从 json 文件获取数据的示例。