javascript - AngularJS 无限滚动 (ng-repeat) - 从 DOM 中移除顶部元素

Question

<分区>

Answer 1

ng-repeat由于与其绑定(bind)相关的开销，长列表的性能急剧下降。我特别喜欢的一个注重性能的库是 ag-grid ，方便地有an example具有可变的行高。您可能会看到它是否适合您的目的。

如果似乎没有什么可以满足您的需求，您可以随时推出自己的指令并自己处理 DOM 操作，就像我在下面拼凑的代码片段一样。它没有涵盖您提到的所有内容，但它包括无限滚动并删除旧元素，用空的 <div> 替换它们的高度, 不使用 ng-repeat。

angular.module('SuperList', [])
  .controller('mainCtrl', ['$scope', '$compile',
    function($scope, $compile) {

      // Magic numbers
      var itemsPerLoad = 4;
      var thresholdPx = 1200;
      var removeThresholdPx = 1600;

      // Options to control your directive are cool
      $scope.listOptions = {
        items: [],
        renderer: renderer,
        threshold: thresholdPx,
        removeThreshold: removeThresholdPx,
        loadFn: loadNewItems
      };

      // This function creates a div for each item in our dataset whenever
      // it's called by the directive
      function renderer(item) {
        var itemElem = angular.element('<div></div');
        itemElem.css('height', item.height + 'px');
        itemElem.html(item.text);
        return itemElem;

        // If each row needs special angular behavior, you can compile it with
        // something like the following instead of returning basic html
        // return $compile(itemElem)($scope);
      }

      // This gets called by the directive when we need to populate more items
      function loadNewItems() {
        // Let's do it async like we're getting something from the server
        setTimeout(function() {
          for (var i = 0; i < itemsPerLoad; i++) {
            // Give each item random text and height
            $scope.listOptions.items.push({
              text: Math.random().toString(36).substr(2, Infinity),
              height: Math.floor(100 + Math.random() * 1100)
            });
          }
          // Call the refresh function to let the directive know we've loaded
          // We could, of course, use $watch in the directive and just make
          // sure a $digest gets called here, but doing it this way is much faster.
          $scope.listOptions.api.refresh();
        }, 500);

        // return true to let the directive know we're waiting on data, so don't
        // call this function again until that happens
        return true;
      }
    }
  ])
  .directive('itemList', function() {
    return {
      restrict: 'A',
      scope: {
        itemList: '='
      },
      link: function(scope, element, attrs) {
        var el = element[0];
        var emptySpace = angular.element('<div class="empty-space"></div>');
        element.append(emptySpace);

        // Keep a selection of previous elements so we can remove them
        // if the user scrolls far enough
        var prevElems = null;
        var prevHeight = 0;
        var nextElems = 0;
        var nextHeight = 0;

        // Options are defined above the directive to keep things modular
        var options = scope.itemList;

        // Keep track of how many rows we've rendered so we know where we left off
        var renderedRows = 0;

        var pendingLoad = false;

        // Add some API functions to let the calling scope interact
        // with the directive more effectively
        options.api = {
          refresh: refresh
        };

        element.on('scroll', checkScroll);

        // Perform the initial setup
        refresh();

        function refresh() {
          addRows();
          checkScroll();
        }

        // Adds any rows that haven't already been rendered. Note that the
        // directive does not process any removed items, so if that functionality
        // is needed you'll need to make changes to this directive
        function addRows() {
          nextElems = [];
          for (var i = renderedRows; i < options.items.length; i++) {
            var e = options.renderer(options.items[i]);
            nextElems.push(e[0])
            element.append(e);
            renderedRows++;
            pendingLoad = false;
          }
          nextElems = angular.element(nextElems);
          nextHeight = el.scrollHeight;

          // Do this for the first time to initialize
          if (!prevElems && nextElems.length) {
            prevElems = nextElems;
            prevHeight = nextHeight;
          }
        }

        function checkScroll() {
          // Only check if we need to load if there isn't already an async load pending
          if (!pendingLoad) {
            if ((el.scrollHeight - el.scrollTop - el.clientHeight) < options.threshold) {
              console.log('Loading new items!');
              pendingLoad = options.loadFn();

              // If we're not waiting for an async event, render the new rows
              if (!pendingLoad) {
                addRows();
              }
            }
          }
          // if we're past the remove threshld, remove all previous elements and replace 
          // lengthen the empty space div to fill the space they occupied
          if (options.removeThreshold && el.scrollTop > prevHeight + options.removeThreshold) {
            console.log('Removing previous elements');
            prevElems.remove();
            emptySpace.css('height', prevHeight + 'px');

            // Stage the next elements for removal
            prevElems = nextElems;
            prevHeight = nextHeight;
          }
        }
      }
    };
  });

.item-list {
  border: 1px solid green;
  width: 600px;
  height: 300px;
  overflow: auto;
}
.item-list > div {
  border: 1px solid blue;
}
.item-list > .empty-space {
  background: #aaffaa;
}

<html>

<head>
  <link rel="stylesheet" href="test.css">
</head>

<body ng-app="SuperList" ng-controller="mainCtrl">
  <div class="item-list" item-list="listOptions"></div>

  <script src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
  <script src="test.js"></script>
</body>

</html>