UI-прокрутки буферного пространства в верхней части области просмотра

Question

Я работаю с UI-Scroll из Angular-UI (отличная работа, компонент потрясающий!).

Все работает хорошо по большей части. Данные загружаются из пользовательского источника данных при прокрутке вниз. Однако, когда я прокручиваю обратно до вершины, я получаю много пробелов в области просмотра.

После проверки кажется, что ui-scroll добавляет подпункт и динамически устанавливает высоту, но по какой-то причине это не возвращается к 0, когда я прокручиваю до верхней части области просмотра.

Я предполагаю, что это связано с тем, как мой источник данных обслуживает данные. Я также не оборачиваюсь отрицательной индексацией. Может ли кто-нибудь объяснить, как я должен учитывать отрицательный индекс в функции datasource.get(), когда я сопоставляю стандартную службу разбивки на страницы (index + offset и т. Д.)?

Answer 1

Реализация источника данных Ui-scroll в случае ограниченного массива данных может выглядеть следующим образом

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);
}

Answer 2

Хорошо, я думаю, что нашел решение... Надеюсь, это поможет кому-то еще, потому что я не смог найти работающий пример в демонстрациях, предоставленных командой angular-ui.

По сути, когда вы получаете отрицательный индекс, вы должны 1) зафиксировать индекс до 0, а затем отрегулировать переменную count по разнице.

Вот пример кода:

    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.