Тендеры и лиды
Информация
Привет всем уважаемые читатели.
Около года назад я решил сделать универсальное open-source решение для визуализации сложных списков. В первых версиях я отрабатывал технологию виртуализации с различными параметрами, было много исследований и вопросов. Недавно состоялся релиз X.12.X версии, которая работает под управлением Angular 14-22. Хочу рассказать на что способен инструмент (ng-virtual-list), какие задачи решает и проведу краткий обзор с демонстрацией примеров.
Все приведенные ниже примеры содержатся в документации с примерами кода.
Инструмент ng-virtual-list это виртуализированные, высокопроизводительные списки с множеством различного функционала, которого нет у стандартных списков.
Библиотека ng-virtual-list сосредоточена на визуализации списков с фиксированными по размеру элементами (наиболее быстрый алгоритм визуализации) и списков с динамическими по размеру элементами.
Под капотом реализован кастомный механизм обработки прокрутки, поэтому на десктопе можно подобно как на мобильных устройствах прокручивать списки движением мыши или тачпада.
В функционале имеется привязка прокрутки к элементам списка с различными параметрами выравнивания. И события типа onSnap, которые отлично подходят в качестве сигналов "фокусировки" элемента при прокрутке.
Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
13691 тендер
проведено за восемь лет работы нашего сайта.
Любой список с всевозможными настройками можно сделать как бесконечный список, который будет зацикливать коллекции элементов.
Для каждого элемента коллекции можно указать набор метаданных, которые будут определять поведение и размеры элементов на экране.
Первые версии ng-virtual-list были сосредоточены на создании именно мессенджера. На данный момент это полностью оттестированный и отлаженный функционал с возможностью прикрепления прокрутки к нижнему или верхнему краю при вертикальной ориентации списка, lazy подгрузка элементов при достижении начала или конца списка, навигации элементов с помощью клавиатуры и многое другое.
В качестве примера с обработкой больших коллекций можно отнести ленту новостей или вьювер для онлайн магазина. Благодаря виртуализации элементов, производительность списков с большими коллекциями стабильно высокая.
Списки можно дробить на колонки в вертикальной ориентации или строки в горизонтальной. А с помощью метаданных для элементов списка можно назначить принудительно размер на всю ширину или высоту списка, применять к ряду элементов stickyLayout, тем самым можно реализовать подобный макет расположения элементов, как представлено выше.
ng-virtual-list может применять трансформации элементов, добавлять DOF(Depth Of Field) и MotionBlur эффекты. Выше представлена демонстрация навигации элементов с помощью "смахивания".
Эти и многие другие примеры реализации можно найти в документации.
