Как реализовать бесконечную прокрутку (Lazy Load) в поле HTML-документа мобильного приложения 1С?

При разработке мобильных приложений на платформе 1С часто возникает задача отображения больших списков номенклатуры с картинками. Стандартные элементы формы не всегда позволяют реализовать гибкий дизайн, поэтому разработчики часто прибегают к использованию ПолеHTMLДокумента. Однако здесь мы сталкиваемся с ограничением: встроенные события 1С не реагируют на прокрутку внутри этого поля. Давайте разберем, как реализовать механизм дозагрузки данных (бесконечную прокрутку) через взаимодействие 1С и JavaScript.

Основные принципы организации взаимодействия

Для того чтобы реализовать «бесконечную прокрутку», нам нужно создать связку между браузерным движком (WebView), в котором отображается HTML, и серверной (или клиентской) логикой мобильного приложения 1С. Поскольку 1С не видит событие onScroll внутри HTML, мы должны «вытащить» это событие наружу.

1. Отслеживание позиции: Внутри HTML-документа с помощью JavaScript мы отслеживаем положение скролла.
2. Передача сигнала в 1С: При достижении конца страницы мы вызываем специальное событие, которое «перехватывается» платформой 1С.
3. Запрос данных: В 1С в событии ОбработкаНавигации мы считываем этот сигнал, получаем новую порцию данных и передаем их обратно в HTML.

Шаг 1: Реализация отслеживания прокрутки через Intersection Observer

Наиболее эффективным и современным способом отследить конец списка является использование Intersection Observer API. Вместо постоянного вычисления координат скролла, которое нагружает процессор мобильного устройства, мы создадим невидимый элемент-маркер в конце списка.

// Внутри HTML документа в самом низу списка добавляем пустой элемент
// <div id="scroll-trigger"></div>

const observer = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
        // Как только элемент появился в зоне видимости, отправляем сигнал в 1С
        window.location = 'e1cib:loadMore';
    }
}, { threshold: 1.0 });

observer.observe(document.querySelector('#scroll-trigger'));

Шаг 2: Обработка сигнала в 1С

Когда в JavaScript выполняется инструкция window.location = 'e1cib:loadMore', платформа 1С генерирует событие ОбработкаНавигации. Нам нужно корректно обработать этот вызов.

&НаКлиенте
Процедура ПолеHTMLОбработкаНавигации(Элемент, НавигационнаяСсылка, СтандартнаяОбработка)
    
    СтандартнаяОбработка = Ложь;
    
    Если НавигационнаяСсылка = \"e1cib:loadMore\" Тогда
        // Вызываем серверный метод для получения новых данных
        ДогрузитьДанныеСервер();
    КонецЕсли;
    
КонецПроцедуры

Шаг 3: Динамическое обновление контента

После того как данные получены на сервере (например, в виде массива структур или JSON), нам нужно обновить DOM-дерево страницы, не перезагружая её полностью. Для этого используем метод Документ.parentWindow.eval().

// Пример передачи данных в JS
Функция СформироватьJSКодДобавления(НовыеДанные)
    // Преобразуем данные в JSON
    ЗаписьJSON = Новый ЗаписьJSON;
    ЗаписьJSON.УстановитьСтроку();
    ЗаписатьJSON(ЗаписьJSON, НовыеДанные);
    СтрокаJSON = ЗаписьJSON.Закрыть();
    
    Возврат \"appendItems('\" + СтрокаJSON + \"');\";
КонецФункции

// Выполнение в 1С:
Скрипт = СформироватьJSКодДобавления(МассивНовыхЭлементов);
Элементы.ПолеHTML.Документ.parentWindow.eval(Скрипт);

В самом HTML-файле у вас должна быть определена JS-функция appendItems, которая принимает JSON-строку, парсит её и добавляет новые узлы (элементы div с картинками) в контейнер списка.

Важные рекомендации для мобильных приложений

Работая с большими списками в мобильной среде, всегда помните о следующих моментах:

• Оптимизация изображений: Используйте атрибут loading=\"lazy\" у тегов <img>. Это позволит браузеру самостоятельно загружать изображения только тогда, когда они приближаются к области видимости.
• Управление памятью: Если список становится слишком большим (сотни элементов), удаляйте старые блоки DOM из начала документа, иначе мобильное приложение может начать тормозить или «вылетать» из-за нехватки оперативной памяти.
• Производительность: Не используйте сложные стили и тяжелые скрипты для отрисовки карточек. Мобильный WebKit имеет свои ограничения по отрисовке сложных CSS-селекторов.

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