ui-scroll:滚动时禁用更新/获取

Question

我正在尝试使用ui-scroll来提供一个大型数据集的动态滚动。

get方法调用查询数据库的后端函数。查询是“慢”的，所以我想在滚动拇指移动时禁用查询。

例如，假设视口显示10行，数据库中有100,000行，我们一次提取100行。

如果你快速地将拇指从顶部拖到底部，ui-scroll目前会发出大量的数据请求。我想跳过所有的中间请求，只在拇指停止移动时获取数据。

我已经摆弄了适配器上的isLoading，但找不到一种方法来实现这一点。

有什么建议吗？Angular 1.4.1。

    $scope.datasource = { };
    $scope.datasource.get = fetchData
    $scope.datasource.minIndex = 0;
    $scope.datasource.maxIndex = 10553;

    $scope.scrollAdaptor = {};

    var loadCount = 0;

    function fetchData(desc, successCb)
    {
        var start = desc.index;
        var end   = desc.index + desc.count - 1;

        var url = "scrollTest.php?start=" + start + "&end=" + end;
        $http.get(url)
        .then(function(goodResp)
        {
            console.log("got data, loadCount", loadCount);
            successCb(goodResp.data);
        },
        function(badResp)
        {
        });

    };

Answer 1

与问题相关的There is a discussion on GitHub。简而言之，angular-ui-scroll不能跳过开箱即用的中间请求，但下面的变通方法可能会有所帮助。

1. 在启动时设置最小/最大索引，以使视口与100,000行相关

$scope.datasource.minIndex =1 $scope.datasource.maxIndex =10000

• 绑定额外的滚动事件以拦截用户在视口上滚动

• 检查两个事件之间的滚动位置增量，如果它大于某个固定值(比如500px)，则重新构建viewport

• Rebuild means adapter.reload(indexToReload)方法调用并设置最小/最大索引

• 最后一件事是indexToReload，它应该根据当前滚动位置和项高度计算：

indexToReload = Math.floor(scrollTop/itemHeight)