ui-视口顶部的滚动缓冲区空间

Question

我正在使用angular-ui中的ui-scroll (非常棒，这个组件太棒了！)

大多数情况下，一切都运行得很好。当我向下滚动时，数据从自定义数据源加载。然而，当我滚动回到顶部时，我最终在视口中看到了许多空格。

经过检查，ui-scroll看起来像是添加了一个子div并动态设置了高度，但由于某种原因，当我滚动到视区顶部时，它并没有被设置回0。

我猜这与我的数据源服务数据的方式有关。我也不会把我的头包裹在负索引上。有人能解释一下，当我映射到一个标准的分页服务(索引+偏移量等)时，我应该如何考虑datasource.get()函数中的负索引吗？

Answer 1

好吧，我想我找到解决方案了.希望这能对其他人有所帮助，因为我在angular-ui团队提供的演示中找不到可用的示例。

本质上，当你收到一个负的索引时，你必须1)将索引钳位到0，然后通过差值调整计数变量。

下面是一些示例代码：

    dataSource.get = function (index, count, successCallback)
    {
        // Index provided is 1-based, we'll convert to 0-based and clamp at 0
        var realIndex = Math.max(1, index) - 1;

        if (index < 0) {
            count -= 1 - index;
        }

        if (realIndex < 0 ||
            count == 0 || 
            realIndex >= vm.searchResultCount)
        {
            successCallback([]);
            return;
        }

        ...
        Make a pagination call to a service that expects the first 
        page of results to be at index 0.

Answer 2

有限数据数组情况下的Ui滚动数据源实现可能如下所示

var min = 1, max = 100;
dataSource.get = function(index, count, success) {
    var start = Math.max(min, index);
    var end = Math.min(index + count - 1, max);
    if (start <= end) {
        getDataAsync(start, start + end + 1).then(success);
    }
    else {
        success([]);
    }
};

这允许您处理以min索引开头的数据数组。此外，您还可以通过var end = index + count - 1轻松消除对底部的限制。

但我也想说，这可能是后端的责任。看看这个示例：https://rawgit.com/angular-ui/ui-scroll/master/demo/append/append.html - data数组限制在1到50之间，而数据源(跳过细节)仅为

get: function (index, count, success) {
    Server.request(index, count).then(success);
}