Показывает много данных, очень быстро!

Новый компонент QVirtualScroll, недавно представленный в версии 1.1.0 Quasar, был создан по многочисленным просьбам сообщества. Многие просили более производительный способ отображения большого количества данных.

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

Если вам доводилось сталкиваться с Quasar, вы можете спросить:

В чем разница между этим компонентом и QInfiniteScroll?

Что ж, главное отличие в том, что с QVirtualScroll данные, которые отображаются и отображаются пользователю (что составляет лишь небольшую часть всех в любой момент времени), являются единственными данными, с которыми Vue должен иметь дело. Это, в свою очередь, означает, что QVirtualScroll гораздо менее ресурсоемкий, чем QInfiniteScroll, и позволяет производить более производительный рендеринг больших списков данных.

Чтобы объяснить это дальше, QVirtualScroll требует, чтобы минимальный размер данных (в опоре item-size) был доступен для компонента заранее, до рендеринга компонента, однако он отображает данные только в той области, которую вы определяете (с опорой virtual-scroll-item-size) внутри компонент.

QInfiniteScroll, с другой стороны, будет строиться на отображаемом списке, получая данные по частям по мере прокрутки пользователя. Это извлечение данных обычно проявляется как некоторая задержка рендеринга (с отображением индикатора загрузки).

Вот QInfiniteScroll в действии:

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

Компонент QVirtualScroll имеет две версии и версию с горизонтальной прокруткой.

Вот основная версия списка…

Использовать эту версию довольно просто.

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

Асинхронный рендеринг данных

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

Вот пример <template> кода (обратите внимание some-component - замените его на свой):

Обратите внимание на несколько важных моментов.
- setTimeout() имитирует возможный вызов сервера.
- Обратите внимание на метод getItems(), предлагаемый для items-fn prop. Это метод, который позволяет вам асинхронно загружать данные в QVirtualScroll.

Ниже показано, как асинхронная загрузка данных может выглядеть в действии (асинхронный компонент - это QChatMessage).

Есть еще и горизонтальный вариант.

Все, что вам нужно, это опора virtual-scroll-horizontal, чтобы компонент работал горизонтально.

<template>
  <q-virtual-scroll
    :items="heavyList"
    virtual-scroll-horizontal
  >
 ....

И, наконец, версия с таблицей разметки.

Чтобы запустить настольную версию, вам нужно только использовать type prop.

<template>
  <div class="q-pa-md">
    <q-virtual-scroll
      type="table"
      style="max-height: 70vh"
      :virtual-scroll-item-size="48"
      :virtual-scroll-sticky-size-start="48"
      :virtual-scroll-sticky-size-end="32"
      :items="heavyList"
    >
....

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

Бонусный совет

Один из членов команды, @metalsadman (Олдрин), также создал пример создания сеткообразных карточек для мобильного просмотра данных в списке QVirtualScroll.

Довольно круто, да?

Сообщите нам, что вы думаете о новом компоненте, в комментариях ниже.

Если вы хотите узнать больше о Quasar:

Веб-сайт Quasar: https://quasar.dev
GitHub: https://github.com/quasarframework/quasar
Начало работы: https://quasar.dev/start
Discord Chat Server: https://chat.quasar.dev
Форум: https://forum.quasar.dev
Twitter: https: //twitter.quasar .dev
Facebook: https://facebook.quasar.dev
Пожертвовать: https://donate.quasar.dev