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

时间:2017-02-22 20:05:22

标签: angularjs angular-ui ui-scroll

我正在使用angular-ui的ui-scroll(很棒的工作,组件太棒了!)。

大部分都运作良好。当我向下滚动时,数据从自定义数据源加载。但是,当我滚动回到顶部时,我最终在视口中有很多空格。

经过检查,看起来ui-scroll正在添加一个子div并动态设置高度,但由于某些原因,当我滚动到视口的顶部时,这不会被设置回0。 / p>

我猜这与我的数据源提供数据的方式有关。我也没有围绕负面索引包围我的头脑。有人解释当我映射到标准分页服务(索引+偏移等)时,我应该如何计算datasource.get()函数中的负索引?

2 个答案:

答案 0 :(得分:0)

好吧,我认为我找到了解决方案......希望这会帮助其他人,因为我无法在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.

答案 1 :(得分:0)

在数据有限的情况下,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 - 数据数据限制在1到50之间,而数据源(跳过详细信息)只是

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