为什么 ngInfiniteScroll (infinite-scroll) 在移动设备上不起作用？

Question

我遇到了 angular infinite-scroll 在移动设备上不起作用的问题 - 在小米 Redmi Note 4 和三星 Galaxy 4 上进行了测试。

我的代码在 PC 和 IOS 设备上正常运行。

问题仅在移动设备上重现。

也许有人面临同样的问题？你能给我一些建议吗？

$scope.loadNews = function() {
  if ($scope.position > $scope.allNews.length) return;
  if ($scope.allNews.length > $scope.news.length) {
    var partOfNews = $scope.getPartOfEntities($scope.newsPosition, $scope.scrollNewsCount, 0);
    for (var i = 0; i < partOfNews.length; i++) {
      $scope.news.push(partOfNews[i]);
    }
  }
};

<div ng-hide="showSpinner">

  <div infinite-scroll='loadNews()' infinite-scroll-distance='0.5'>
    <hr>
    <news data="news"></news>

  </div>

</div>

        handler = function() {
          var elementBottom, remaining, shouldScroll, windowBottom;
          windowBottom = $window.height() + $window.scrollTop();
          elementBottom = elem.offset().top + elem.height();
          remaining = elementBottom - windowBottom;
          shouldScroll = remaining <= $window.height() * scrollDistance;
          if (shouldScroll && scrollEnabled) {
            if ($rootScope.$$phase) {
              return scope.$eval(attrs.infiniteScroll);
            } else {
              return scope.$apply(attrs.infiniteScroll);
            }
          } else if (shouldScroll) {
            return checkWhenEnabled = true;
          }
        };

          var applied = false;
          var touchmover = function () {
              if ( ! applied) {
                  applied = true;
                  $window.on('touchend', handler);
              }
          };

          $window.on('touchmove', handler);
          scope.$on('$destroy', function() {
              $window.off('touchend', handler);
              applied = false;
              return $window.off('touchmove', touchmover);
        });

Answer 1

我有同样的问题，但我已经发现了。如果你正在使用

无限滚动使用-document-bottom="true"

那么你必须将无限滚动距离设置为 1

无限滚动距离=“1”

。如果您将其设置为 0，它在移动设备上不起作用

无限滚动距离=“0”

Answer 2

你可以使用一段简单的基于滚动的代码

$('#news').bind('scroll', function(){ if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight){ //alert(1); loadNews(); } });