Question

我在binarymuse.github.io/ngInfiniteScroll /

的链接中使用InfiniteScroll

 <div id="cardsDiv"  infinite-scroll="getMoreCards()" infinite-scroll-distance="2">       
 </div>

当infinite-scroll-distance="2"函数工作在桌面上启动而不触及滚动和移动工作完美

当infinite-scroll-distance="1"移动设备完全无法工作且桌面工作正常时

任何帮助都会受到赞赏。

Answer 1

来自文档（link）。

infinite-scroll-distance（可选） - {number} - 一个数字，表示在触发无限滚动指定的表达式之前，元素底部必须与浏览器窗口底部的接近程度。以窗口高度的倍数测量;例如，如果浏览器窗口的高度为1000像素且无限滚动距离设置为2，则当元素的底部位于浏览器窗口底部的2000像素范围内时，将评估无限滚动表达式。默认为0（例如，当元素的底部穿过浏览器窗口的底部时，将评估表达式。）

因此，由于您在桌面上给它值“2”（假设您有一个完整的高清显示器），它将立即开始滚动。类似的情况与移动。

简单的解决方案是将其设置为“0”并希望每次都能正常工作。或者你可以试试这个：

var getInfScrollDist = function() {
    var winWidth = $window.innerWidth;
    return winWidth > 420 ? 1 : 2;
};

$window.addEventListener('resize', function() {
    $scope.infScrollDist = getInfScrollDist();
}, false);

$scope.infScrollDist = getInfScrollDist();

在模板中：

<div id="cardsDiv" infinite-scroll="getMoreCards()" infinite-scroll-distance="infScrollDist"></div>

P.S：当$window被销毁时，不要忘记删除$scope上的监听器：

$scope.$on('$destroy', function() {
    $window.removeEventListener( 'resize' );
});

无限滚动无法正常工作

1 个答案: