Привет всем уважаемые читатели.

Около года назад я решил сделать универсальное open-source решение для визуализации списков. В первых версиях я отрабатывал технологию виртуализации с различными параметрами, было много исследований, вопросов. Сегодня же состоялся релиз X.12.X версии, которая работает под управлением Angular 14-22. Хочу рассказать на что способен инструмент (ng-virtual-list), какие задачи решает и проведу краткий обзор с демонстрацией примеров.

Все приведенные ниже примеры содержатся в документации с примерами кода.

Инструмент ng-virtual-list это виртуализированные, высокопроизводительные списки с множеством различного функционала, которого нет у стандартных списков.

Список с 3D трансформациями и визуальными эффектами.

Библиотека ng-virtual-list сосредоточена на визуализации списков с фиксированными по размеру элементами (наиболее быстрый алгоритм визуализации) и списков с динамическими по размеру элементами.

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

Список с привязкой прокрутки к элементам.

В функционале имеется привязка прокрутки к элементам списка с различными параметрами выравнивания. И события типа onSnap, которые отлично подходят в качестве сигналов "фокусировки" элемента при прокрутке.

Любой список с всевозможными настройками можно сделать как бесконечный список, который будет зацикливать коллекции элементов.

Для каждого элемента коллекции можно указать набор метаданных, которые будут определять поведение и размеры элементов на экране.

Первые версии ng-virtual-list были сосредоточены на создании именно мессенджера, было много упущений и дефектов. Сейчас же это полностью оттестированный и отлаженный функционал с возможностью прикрепления прокрутки к нижнему или верхнему краю при вертикальной ориентации списка, lazy подгрузка элементов при достижении начала или конца списка, навигации элементов с помощью клавиатуры и многое другое.

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

Списки можно дробить на колонки в вертикальной ориентации или строки в горизонтальной. А с помощью метаданных для элементов списка можно назначить принудительно размер на всю ширину или высоту списка, применять к ряду элементов stickyLayout, тем самым можно реализовать подобный макет расположения элементов, как представлено выше.

ng-virtual-list может применять трансформации элементов, добавлять DOF(Depth Of Field) и MotionBlur эффекты. Выше представлена демонстрация навигации элементов с помощью "смахивания".

P.S.: Если понравился проект, ставьте звездочку ⭐ ng-virtual-list

Многофункциональные списки ng-virtual-list