Введение
В этом уроке мы продолжим работу над фронтендом для 1С, используя Vue и Vuetify. Мы добавим поддержку асинхронных запросов к http‑сервису 1С через Axios, реализуем lazy loading товаров при прокрутке списка с помощью IntersectionObserver и доработаем запрос, чтобы он учитывал характеристики товаров.
Установка зависимостей
Для начала установим необходимые пакеты:
- Vue – основной фреймворк.
- Vuetify – UI‑компоненты для Vue.
- Axios – библиотека для HTTP‑запросов.
Создание компонента списка товаров
Создайте компонент, который будет отображать список товаров. В шаблоне используйте Vuetify‑компоненты, например v-list и v-list-item, чтобы визуализировать элементы.
Lazy loading с IntersectionObserver
Для подгрузки товаров при достижении конца списка применяем IntersectionObserver. При наблюдении за последним элементом списка, когда он входит в область видимости, отправляем запрос на сервер и добавляем новые товары в массив.
Обновление запроса к 1С
В первой части урока запрос не учитывал характеристики товаров. В этой части мы доработаем его, добавив необходимые параметры, чтобы сервер возвращал полную информацию о каждом товаре.
Следующий шаг: перенос в мобильное приложение
В следующем уроке весь код будет перенесён в мобильное приложение 1С, чтобы получить полноценный пользовательский интерфейс на мобильных устройствах.
Скачать исходники
Вы можете скачать исходный код из статьи по ссылке ниже:
https://nizamov.school/mobilnaya-1s-lazyloading-nomenklatury-chast-2?utm_source=telegram
Дополнительные ресурсы
Если вам понравилась работа с Vue и 1С, приглашаем записаться на курс по разработке личного кабинета контрагента на NuxtJS для 1С:
https://nizamov.school/courses/integration1s/nuxt1s?utm_source=telegram
Медиа
- Видео‑урок: https://www.youtube.com/watch?v=p60kKOYP7pk
- Фото: photo_182@15-03-2021_10-27-36.jpg