При разработке мобильных приложений на платформе 1С программисты часто сталкиваются с ограничениями стандартного интерфейса. Одним из таких вызовов является создание интерактивной карусели изображений, которая должна поддерживать жесты (свайпы), отображать несколько объектов одновременно и при этом работать плавно в условиях ограниченных ресурсов мобильного устройства. Оптимальным решением здесь выступает использование ПолеHTMLДокумента. В этой статье мы подробно разберем, как интегрировать современные веб-технологии в 1С для решения этой задачи.
Рассмотрим основные требования: нам нужно отображать, например, три картинки в ряд, иметь возможность прокрутки и подписи под изображениями. Поскольку 1С использует системный движок WebView (на Android это чаще всего Chromium, на iOS — WebKit), мы можем использовать возможности HTML5, CSS3 и JavaScript. Проанализируем несколько подходов к реализации:
Выясним причину, почему старые библиотеки, такие как Owl Carousel 2, сейчас менее предпочтительны: они требуют наличия jQuery. В контексте мобильной 1С лишняя зависимость — это лишний объем передаваемых данных и дополнительная нагрузка на оперативную память. Мы сосредоточимся на более современных и легких решениях.
Библиотека Swiper.js является «золотым стандартом» для мобильных каруселей. Она изначально создавалась для сенсорных экранов и поддерживает аппаратное ускорение.
Разберем по шагам, как подготовить HTML-код для вставки в 1С. Для начала нам необходимо настроить контейнер, где slidesPerView будет равно 3. Посмотрим на пример структуры:
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="data:image/png;base64,...">
<p>Подпись 1</p>
</div>
<div class="swiper-slide">
<img src="data:image/png;base64,...">
<p>Подпись 2</p>
</div>
<div class="swiper-slide">
<img src="data:image/png;base64,...">
<p>Подпись 3</p>
</div>
</div>
</div>
Проанализируем важный момент: в мобильной 1С работа с локальными файлами картинок может быть затруднена из-за политик безопасности WebView. Поэтому лучше всего передавать изображения в формате Base64. В 1С это делается с помощью метода Base64Строка() от двоичных данных картинки.
Для инициализации карусели используем следующий JavaScript:
const swiper = new Swiper('.swiper', {
slidesPerView: 3,
spaceBetween: 10,
centeredSlides: false,
grabCursor: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
Если нам нужно максимально сэкономить ресурсы, рассмотрим технологию CSS Scroll Snap. Она позволяет создавать карусели, которые прокручиваются плавно и «примагничиваются» к границам элементов силами самого браузерного движка.
Для реализации этого метода зададим контейнеру свойство scroll-snap-type. Проанализируем пример стилей:
.scroll-container {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; /* Для плавной прокрутки на iOS */
}
.scroll-item {
flex: 0 0 33.333%; /* Отображаем ровно 3 элемента */
scroll-snap-align: start;
text-align: center;
}
В данном случае нам не нужно подключать внешние скрипты. Это идеальный вариант для простых витрин товаров внутри мобильного приложения. Однако стоит учитывать, что в старых версиях Android (ниже 5.0) поддержка этой технологии может быть ограниченной.
Важно не только отобразить карусель, но и обработать нажатие на картинку в коде 1С. Для этого мы используем специальную схему URL. Разберем, как это работает: при клике на элемент в JS вызывается смена window.location.
function imageClick(id) {
window.location.href = "v8://click_image?id=" + id;
}
В конфигураторе 1С для объекта ПолеHTMLДокумента мы должны создать обработчик события ПриНажатии (или OnURLClick в некоторых версиях). Проанализируем код на стороне 1С:
&НаКлиенте
Процедура ПолеHTMLПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
Если Найти(ДанныеСобытия.URL, "v8://click_image") > 0 Тогда
СтандартнаяОбработка = Ложь;
// Извлекаем ID из URL и выполняем действие
ИдентификаторКартинки = Сред(ДанныеСобытия.URL, Найти(ДанныеСобытия.URL, "id=") + 3);
Сообщить("Выбрана картинка с ID: " + ИдентификаторКартинки);
КонецЕсли;
КонецПроцедуры
Работа WebView в мобильной 1С может потреблять значительное количество ресурсов. Рассмотрим рекомендации, которые помогут сделать интерфейс более отзывчивым:
transform: translate3d(0,0,0); к стилям слайдов. Это задействует графический процессор (GPU) для отрисовки анимаций.<head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">Объединим все вышесказанное в единую структуру, которую можно программно сформировать в 1С и передать в свойство Документ или Текст поля HTML.
<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; padding: 0; font-family: sans-serif; }
.carousel-wrapper {
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
gap: 5px;
padding: 10px;
}
.item {
flex: 0 0 calc(33.33% - 10px);
scroll-snap-align: center;
border: 1px solid #ccc;
border-radius: 8px;
padding: 5px;
text-align: center;
}
.item img { width: 100%; height: auto; border-radius: 4px; }
.item p { font-size: 12px; margin-top: 5px; }
</style>
</head>
<body>
<div class="carousel-wrapper">
<div class="item" onclick="location.href='v8://click?id=1'">
<img src="BASE64_DATA_1">
<p>Товар 1</p>
</div>
<div class="item" onclick="location.href='v8://click?id=2'">
<img src="BASE64_DATA_2">
<p>Товар 2</p>
</div>
<div class="item" onclick="location.href='v8://click?id=3'">
<img src="BASE64_DATA_3">
<p>Товар 3</p>
</div>
<!-- Дополнительные элементы -->
</div>
</body>
</html>
Таким образом, мы проанализировали ситуацию и выяснили, что для мобильной 1С наиболее эффективным является сочетание Base64 для передачи данных и CSS Scroll Snap или Swiper.js для визуализации. Эти методы обеспечивают высокую скорость работы и предсказуемое поведение на разных мобильных операционных системах.