时间戳

首页 > 解决方案 > ui-scroll：滚动时禁用更新/获取

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

问题描述

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

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

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

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

我isLoading在适配器上摆弄过，但找不到使这项工作的方法。

建议？角 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)
        {
        });

    };

标签： angularjsui-scroll

解决方案

GitHub上有与该问题相关的讨论。简而言之，angular-ui-scroll 不能直接跳过中间请求，但以下解决方法可能会有所帮助。

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

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

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

  3. 检查两个事件之间的滚动位置增量，如果它大于某个固定值（例如 500 像素），则重建视口

  4. 重建意味着adapter.reload(indexToReload)方法调用和设置最小/最大索引

  5. 最后一件事是indexToReload，它应该由当前滚动位置和项目高度来计算：

    indexToReload = Math.floor(scrollTop/itemHeight)

推荐阅读