Узнайте, как с помощью этой удобной библиотеки можно с минимальными усилиями реализовать интерфейс с возможностью прокрутки в ваших приложениях.
По мере того, как мобильные устройства становятся все более популярными, интерфейсы с возможностью перелистывания стали стандартным способом взаимодействия с приложениями. Перелистываемые интерфейсы необходимы для обеспечения наилучшего взаимодействия с мобильными пользователями.
Swiper — это универсальная библиотека, которая позволяет создавать интерфейсы с возможностью перелистывания в приложениях React. Узнайте, как с помощью Swiper создавать интерфейсы с возможностью перелистывания в приложении React.
Установка Свипера
Swiper — одна из многих библиотек, которые вы можете использовать для настройки своего приложения React. Чтобы начать работу со Swiper, вам необходимо установить его в свое приложение React. Вы можете сделать это с помощью следующей команды терминала, которую вы должны запустить в корневом каталоге вашего проекта:
npm установить swiper
После того, как вы установили Swiper, вы можете использовать его в своем приложении.
Создание перелистываемых интерфейсов
После установки Swiper в вашем приложении React вы можете создавать интерфейсы с возможностью перелистывания. Начните с импорта Свайпер и SwiperSlide компоненты из библиотеки Swiper.
Компонент Swiper является основным компонентом библиотеки Swiper. Он определяет структуру, поведение и функциональность перелистываемых элементов. Компонент SwiperSlide является дочерним компонентом компонента Swiper. Он определяет отдельные слайды, которые находятся в компоненте Swiper.
Вот пример перелистываемого интерфейса с использованием компонентов Swiper и SwiperSlide:
Импортировать Реагировать от«реагировать»;
Импортировать {Swiper, SwiperSlide} от"пролистывать/реагировать";
Импортировать'Swiper/CSS';функцияПриложение() {
возвращаться (<дивclassName='элемент'>Элемент 1див></SwiperSlide> <дивclassName='элемент'>Элемент 2див></SwiperSlide> <дивclassName='элемент'>Элемент 3див></SwiperSlide> <дивclassName='элемент'>Элемент 4див></SwiperSlide>
</Swiper>
</div>
)
}
экспортпо умолчанию Приложение
В добавок к Свайпер и SwiperSlide компоненты, этот блок кода импортирует таблицу стилей по умолчанию для Swiper, используя swiper/css модуль.
Затем в примере компонент Swiper оборачивает четыре дочерних компонента SwiperSlide. Каждый SwiperSlide содержит див элемент с className атрибут. Вы можете использовать className для стилизации элементов div:
.элемент {
встроенный размер: 100пикс.;
радиус границы: 12пикс.;
набивка: 1бэр;
цвет: #333333;
фоновый цвет: #e2e2e2;
семейство шрифтов: скоропись;
}
Настройка вашего перелистываемого интерфейса
После успешного создания перелистываемого интерфейса вы можете улучшить его внешний вид и функциональность в соответствии со своими требованиями.
С помощью Swiper вы можете настроить поведение и внешний вид интерфейса, используя различные параметры. Вы передаете эти параметры в Свайпер компонент как реквизит в React:
Импортировать Реагировать от«реагировать»;
Импортировать {Swiper, SwiperSlide} от"пролистывать/реагировать";
Импортировать'Swiper/CSS';функцияПриложение() {
возвращаться (
пробел между = {30}
слайдыPerView={2}
петля={ истинный }
><дивclassName='элемент'>Элемент 1див></SwiperSlide> <дивclassName='элемент'>Элемент 2див></SwiperSlide> <дивclassName='элемент'>Элемент 3див></SwiperSlide> <дивclassName='элемент'>Элемент 4див></SwiperSlide>
</Swiper>
</div>
)
}
экспортпо умолчанию Приложение
В этом примере компонент Swiper принимает три реквизита: пространство между, слайдыPerView, и петля. пространство между prop устанавливает расстояние между каждым слайдом, в данном случае 30 пикселей.
Используя слайдыPerView prop, вы можете установить количество слайдов, видимых одновременно. В этом случае слайдыPerView prop установлен на 2, вызывая Свайпер компонент для одновременного отображения двух слайдов.
Наконец, петля prop указывает, должны ли слайды зацикливаться бесконечно или нет. В этом примере слайды будут повторяться бесконечно, потому что петля значение реквизита истинный.
Настройка перелистываемых интерфейсов с помощью модулей
Вы можете дополнительно настроить поведение вашего пролистываемого интерфейса с помощью Модули JavaScript предоставляется библиотекой Swiper. Некоторые из модулей, которые он предоставляет, Навигация, Автовоспроизведение, Пагинация, и Полоса прокрутки.
Чтобы использовать любой из этих модулей в своем приложении, вы должны импортировать их из библиотеки Swiper. Вы также должны импортировать соответствующие стили CSS для модулей и передать их имена в Свайпер компонент, использующий модули опора
Например, вот так можно использовать Навигация модуль для настройки перелистываемых интерфейсов:
Импортировать Реагировать от"реагировать";
Импортировать {Swiper, SwiperSlide} от"пролистывать/реагировать";
Импортировать { Навигация } от"свайпер";
Импортировать"свайпер/CSS";
Импортировать"swiper/css/навигация";функцияПриложение() {
возвращаться (
пробел между = {30}
слайдыPerView={2}
модули={[Навигация]}
петля={истинный}
навигация={истинный}
><дивclassName="элемент">Элемент 1див></SwiperSlide> <дивclassName="элемент">Элемент 2див></SwiperSlide> <дивclassName="элемент">Элемент 3див></SwiperSlide> <дивclassName="элемент">Элемент 4див></SwiperSlide>
</Swiper>
</div>
);
}
экспортпо умолчанию Приложение;
Этот блок кода импортирует Навигация модуль и его стиль CSS, затем указывает модуль в модули опора Свайпер компонент. модули prop включает и настраивает модули, предоставляемые библиотекой Swiper.
Модуль навигации обеспечивает функциональность навигации для компонента Swiper. Он добавляет кнопки со стрелками «предыдущий» и «следующий», которые можно щелкнуть или коснуться, чтобы перейти к предыдущему или следующему слайду.
навигация prop имеет значение true, что приведет к отображению на экране кнопок «предыдущий» и «следующий».
Настройка перелистываемых интерфейсов с помощью автозапуска
Автовоспроизведение модуль позволяет слайдеру автоматически переходить между слайдами без взаимодействия с пользователем.
Вот пример того, как настроить интерфейс с возможностью перелистывания с помощью Автовоспроизведение модуль:
Импортировать Реагировать от"реагировать";
Импортировать {Swiper, SwiperSlide} от"пролистывать/реагировать";
Импортировать { Автовоспроизведение } от"свайпер";
Импортировать"свайпер/CSS";
Импортировать"swiper/css/автовоспроизведение";функцияПриложение() {
возвращаться (
пробел между = {30}
слайдыPerView={2}
модули={[Автовоспроизведение]}
петля={истинный}
автовоспроизведение={{ задерживать: 3000 }}
><дивclassName="элемент">Элемент 1див></SwiperSlide> <дивclassName="элемент">Элемент 2див></SwiperSlide> <дивclassName="элемент">Элемент 3див></SwiperSlide> <дивclassName="элемент">Элемент 4див></SwiperSlide>
</Swiper>
</div>
);
}
экспортпо умолчанию Приложение;
Используя Автовоспроизведение prop, вы можете указать задерживать; в данном случае установлено значение 3000 миллисекунд.
Настройка перелистываемых интерфейсов с разбиением на страницы
Еще одним важным модулем Swiper является Пагинация. Пагинация Модуль позволяет добавлять маркеры нумерации страниц или индикаторы выполнения к ползунку, предоставляя пользователям визуальное представление количества слайдов и их текущего положения в ползунке.
Чтобы использовать Пагинация модуль, его необходимо импортировать и включить в модули опора Свайпер компонент:
Импортировать Реагировать от"реагировать";
Импортировать {Swiper, SwiperSlide} от"пролистывать/реагировать";
Импортировать { Разбивка на страницы } от"свайпер";
Импортировать"свайпер/CSS";
Импортировать"swiper/css/разбиение на страницы";функцияПриложение() {
возвращаться (
пробел между = {30}
слайдыPerView={2}
модули={[Разбивка на страницы]}
петля={истинный}
разбиение на страницы = {{ кликабельный: истинный }}
><дивclassName="элемент">Элемент 1див></SwiperSlide> <дивclassName="элемент">Элемент 2див></SwiperSlide> <дивclassName="элемент">Элемент 3див></SwiperSlide> <дивclassName="элемент">Элемент 4див></SwiperSlide>
</Swiper>
</div>
);
}
экспортпо умолчанию Приложение;
Этот блок кода обеспечивает функциональность разбиения на страницы с помощью Пагинация модуль. Это также позволяет пользователям щелкнуть нумерация страниц пули, установив кликабельный собственность нумерация страниц опора на истину.
В дополнение к библиотеке Swiper нумерация страниц модуль, реагировать-разбивать на страницы — еще один отличный вариант для создания нумерации страниц в вашем приложении React.
Создание доступных приложений с помощью React
Перелистываемые интерфейсы улучшают взаимодействие с вашим приложением для пользователей с сенсорным экраном. Swiper предлагает большую гибкость, и вы можете легко настроить его в соответствии с потребностями вашего приложения.
Различные библиотеки пользовательского интерфейса могут помочь сделать ваши приложения React более доступными. Эти библиотеки предоставляют возможности и функциональные возможности, улучшающие взаимодействие с пользователем вашего приложения.