Бесконечная прокрутка в Angular с помощью CDK

Бесконечная прокрутка в Angular с помощью CDK

От автора: при работе с большим количеством контента может оказаться полезным добавить на ваш сайт функцию бесконечной прокрутки. Когда я говорю «бесконечная прокрутка», я имею в виду страницу, добавляющую новый контент, пока пользователь продолжает прокручивать ее, создавая иллюзию бесконечной прокрутки страницы. Многие веб-сайты используют эту функцию, и она может быть гибкой альтернативой нумерации страниц.

Несмотря на то, что существует множество различных способов реализации этого, давайте рассмотрим, как мы можем сделать это с помощью Angular Component Dev Kit (CDK).

Настройка

Начнем с добавления в проект пакета @angular/cdk:

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

Чтобы использовать функции бесконечной прокрутки в этом пакете, импортируйте ScrollingModule в app.module.ts:

Затем добавьте его в импорт:

Теперь вы готовы начать!

Реализация бесконечной прокрутки

Мы собираемся создать компонент, который отображает случайные исторические события. Когда пользователь достигнет конца прокрутки, приложение загрузит следующие факты. Для целей этого руководства я не буду вдаваться в детали построения сервиса.

Пока предположим, что у нас есть FactService, который предоставляет только следующую функцию:

Мы будем извлекать 10 фактов за раз, и каждый раз, когда пользователь прокручивает страницу до конца, мы запрашиваем еще 10 фактов.

FactScrollerComponent

Создайте новый компонент, который будет действовать как бесконечный скроллер. Я вызываю FactScrollerComponent. Вы можете использовать для этого Angular CLI:

Убедитесь, что новый компонент импортирован в app.module.ts и добавлен в объявления:

В fact-scroller.component.html мы создадим:

Здесь мы используем наш виртуальный скроллер cdk-virtual-scroll-viewport. В нем мы перебираем через цикл элементаы, используя *cdkVirtualFor, что аналогично использованию *ngFor.

Чтобы компонент правильно определил размер внутреннего скроллера, нам нужно сообщить скроллеру, какой будет высота каждого элемента (в пикселях). Это делается с использованием директивы itemSize. Таким образом, itemSize=»100″ означает, что элемент в списке будет иметь высоту 100px.

Мы также указали скроллеру извлечь данные dataSource, которых еще нет, поэтому нужно создать их сейчас.

Пользовательский FactsDataSource

В файле fact-scroller.component.ts нам нужно определить, как выглядит источник данных. Для этого мы расширим класс DataSource в @angular/cdk/collections. Вот как выглядит источник данных:

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

Здесь много кода, так что давайте разберемся с этим по порядку. Сначала мы определяем модель Fact, которая будет определять структуру данных.

Внутри FactsDataSource нам нужно реализовать две функции: connect() и disconnect(). Источник данных подписывается на любые изменения в средстве просмотра коллекции (например, прокрутки пользователя), а затем выполняет действие и возвращает поток данных. Мы указали источнику данных, чтобы он получал следующие данные, когда мы достигнем конца списка.

Мы также объявили три переменные-члена:

cachedFacts: кэшированные результаты,

dataStream: RxJS BehaviorSubject для распространения изменений в наших кэшированных результатах, и

subscription: подписка для прослушивания изменений коллекции представлений.

Давайте определим несколько вспомогательных функций в этом классе:

Я устанавливаю размер страницы — 10, что означает, что я хочу получить 10 фактов за раз. Я также собираюсь отслеживать последнюю загруженную страницу.

_fetchFactPage() просто выполняет вызов к сервису, чтобы получить некоторые факты, которые затем добавляются в кеш.
_getPageForIndex() преобразует индекс строки в значение страницы (или пачки).

Собрав все это вместе, мы можем определить, как список будет обновляться в обратном вызове подписки:

Мы также хотим, чтобы с самого начала у нас уже были некоторые данные, для этого мы можем вызвать функцию fetch в конструкторе:

Наш пользовательский источник данных теперь должен привести нас туда, куда нам нужно. Последняя часть, чтобы собрать все это вместе, это добавить новый источник данных в компонент.

И все готово! С этого момента все форматируется. Я переписал HTML, чтобы вывести факты таким образом:

Удачной прокрутки!

Автор: Chris Engelsma

Источник: https://alligator.io

Редакция: Команда webformyself.

Практический курс по созданию веб-приложения на Angular4

Скачайте БЕСПЛАТНЫЙ мини-курс и изучите базовые возможности JavaScript-фреймворка Angular 4 за ближайшие 3 дня

Узнать подробнее

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий