Как перейти к концу области просмотра "бесконечный свиток"?
Я использую ui-scroll для реализации бесконечной прокрутки в моем приложении Angular.
Он отлично работает, и я использую его для отображения списка событий.
Однако, когда мое приложение загружается, оно отображает первые события по умолчанию (индекс 1
на самом деле). Чтобы увидеть самые последние события, нужно прокрутить список событий вниз. Это проблема, когда список событий действительно большой и в некоторой степени побеждает точку разбиения на страницы, потому что веб-приложение должно пройти через все события, чтобы получить самые последние из них.
Как я могу дать команду ui-scroll начать с последних событий? Очевидно, у меня есть метод бэкэнда (HEAD
запрос, который я могу использовать, чтобы получить общее количество событий), чтобы получить первоначально желаемый индекс. Я просто не могу найти способ поместить этот начальный индекс в ui-scroll.
Любая подсказка?
Как и требовалось, вот пример кода, хотя это довольно "стандартный" материал пользовательского интерфейса:
<ul ui-scroll-viewport class="event-list" ng-class="{loading: eventsLoading}">
<li ui-scroll="event in eventsProvider" data-buffer-size="20" is-loading="eventsLoading">
<p>event.text</p>
</li>
</ul>
Вот что у меня в контроллере:
$scope.eventsProvider = {
get: function(index, count, success) {
$scope.events = ZoneEventsService.query({
session_type: $scope.session_type,
zone: $scope.zone,
offset: index - 1,
limit: count
}, function(result) {
success(result.items);
});
}
};
1 ответ
Я действительно нашел способ. В моем контроллере я откладываю первую загрузку данных и вручную смещаю свое смещение на общее количество событий. Поскольку пользовательская прокрутка обрабатывает отрицательные смещения из коробки, она просто работает.
$scope.eventsInfo = ZoneEventsService.head({
session_type: $scope.session_type,
zone: $scope.zone,
limit: 0,
});
$scope.eventsProvider = {
get: function(index, count, success) {
// The promise will wait the first time around and be resolved already on following calls.
$scope.eventsInfo.$promise.then(function() {
$scope.events = ZoneEventsService.query({
session_type: $scope.session_type,
zone: $scope.zone,
// Here goes the magic.
offset: index - 1 + $scope.eventsInfo.total_count,
limit: count
}, function(result) {
success(result.items);
});
});
}
};