为什么ngInfiniteScroll(无限滚动)不能在移动设备上运行?

时间:2017-03-22 12:43:44

标签: javascript angularjs infinite-scroll nginfinitescroll

我遇到了角度无限滚动无法在移动设备上运行的问题 - 在小米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>

&#13;
&#13;
        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);
        });
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

您可以使用基于滚动的简单代码

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

答案 1 :(得分:0)

我有同样的问题,但是我不赞成。如果您使用

  

infinite-scroll-use-document-bottom =“ true”

然后您必须将无限滚动距离设置为1

  

infinite-scroll-distance =“ 1”

。如果将其设置为0,则无法在移动设备上运行

  

infinite-scroll-distance =“ 0”