Автор оригинала: FreeCodeCamp Community Member.
Fabian Hinsenkamp
Карусель, слайд-шоу или слайдер – однако вы называете это этим классом UI – стал одним из основных элементов, используемых в современном веб-разработке. Сегодня практически невозможно найти какой-либо веб-сайт или библиотеку пользовательской интерфейсы, которая не приходит с одним или другим видом карусели.
Но почему? На самом деле, карусели действительно заслуживают их популярности. Они позволяют пользователям просматривать доступный контент без вертикальных прокрутков или тяжелых движений мыши. Следовательно, пользователи сэкономят время и могут сосредоточиться на отображенном контент, так как Carousels сохраняют когнитивную нагрузку до минимума.
Это причина достаточно, чтобы узнать, как построить карусель в Vuejs!
Все мои учебные пособия тяготеют вокруг прогрессивных приложений Vue. Этот не исключение! Создание прогрессивных приложений означает доставку UX для мобильных пользователей рядом с нативными приложениями, включая отличную производительность, нативные функции, такие как push-уведомления, оффлайн опыт и многое другое. В мире, где большинство пользователей испытывают веб-сайт через мобильные устройства, не оставлено оправдания, чтобы не создавать прогрессивные приложения!
Конечно, вы все еще можете использовать карусель в любом приложении Vue. Вам также не нужен предыдущий опыт работы с Vuejs или Progressive Web Apps для этого руководства!
Вы находите полный код здесь:
https://github.com/fh48/vue-pwa-carousel
Какое наше видение карусели?
Первое, что мы сделаем, это сделать обзор, какие компоненты мы хотим построить.
Есть несколько очень простых:
- Карта → Он содержит информацию о каждом элементе карусели.
- Карусель → Родитель, который содержит всю логику
- Arrowbutton → помогает перемещаться между несколькими картами.
- Индикатор → показывает количество карт и который в настоящее время виден.
Начальная настройка
Если вы хотите узнать, как настроить проект, этот раздел для вас. Если вы этого не сделаете, просто продолжайте следующий раздел.
vue init pwa vue-pwa-carousel
Нам будет предложено выбрать предустановку – рекомендую следующую конфигурацию:
? Project name vue-pwa-carousel? Project short name: fewer than 12 characters to not be truncated on homescreens (default: same as name) vue-pwa-carousel? Project description A simple tax calculator ? Author Fabian Hinsenkamp? Vue build runtime? Install vue-router? No? Use ESLint to lint your code? No? Pick an ESLint preset Standard? Setup unit tests with Karma + Mocha? No? Setup e2e tests with Nightwatch? No
Беги пряжа В корневой папке проекта для установки всех зависимостей. Теперь у нас есть настройка проекта, которая включает в себя основные технологии, которые нам нужно создать нашу карусель. Кроме того, он уже включает в себя сервисный работник, который предварительно кэширует все наши статические файлы и позволяет пользователям получать доступ к приложению, даже если они не в сети.
Вы можете проверить, как выглядит приложение шаблона, запущена Запуск пряжи .
Чтобы проверить, как карусель смотрит на мобильном телефоне, нам нужно разоблачить нашу сборку в разработке на мобильные устройства через публичный URL. Есть много способов сделать это, но здесь мы используем Ngrok Как легко настроить и просто делает свою работу.
yarn global add ngrok
Далее нам нужно запустить наш сервер Dev и Ngrok в двух отдельных терминалах.
Давайте построим карту!
Чтобы сохранить вам некоторые скучные корректировки в приложение шаблона, просто проверьте эту ветку 00_basicsetup. . Он включает в себя все данные и стили, которые нам нужно сделать это приложение значимым и красивым.
Карта действительно делает одно: он показывает отобранные в данный момент данные. Что в нашем случае изображение , а заголовок и некоторые текст Отказ
Очевидно, что мы не хотим создавать несколько карт с жестким кодированным контентом. Вместо этого мы хотим динамически передавать данные на карту и просто сделать ее.
Исходя из этого знания, теперь мы можем создать наши Карта.vue Файл в SRC/Компоненты папка. Кроме того, мы уже можем определить основную структуру HTML и имена и их типы свойств, которые мы хотим перейти на карту.
Внимание: мы храним все значки, которые мы хотим отображать локально в нашей папке активов. Это означает, что наш путь остается прежним, но нам нужно динамически изменять имена файлов, которые должны быть представлены. Следовательно, все свойства имеют тип Строка Отказ
Далее мы делаем Карта Сделайте заголовок и связанный текст. Следовательно, мы используем самый простой способ привязки данных в Vuejs – бирку усов.
Это в основном просто фигурные скобки вокруг наших переменных Как только данные поступит, {{заголовок}} и {{Text}} будет заменить связанным объектом данных. Это всегда верно, а также при появлении новых данных, после того, как оказала другие данные ранее.
Оказание изображения динамически немного сложнее. Помните, что мы не проходим фактический значок, но только его имя файла.
Таким образом, мы в основном хотим потреблять изображение в качестве модуля, как и любой другой компонент. Статическое изображение, которое мы могли бы потреблять, импортируя его в блок сценария и назначьте его переменной. Однако у нас есть изменение пути. Поскольку наше приложение использует WebPack, существует фантастическая скратформа, доступная для динамически их загрузки следующим образом:
:src="require(`@/assets/svg/${imgName}`)" : Синтаксис – это Vue-Way для динамически связывания атрибутов на выражение. Вы могли бы уже увидеть V-bind: префикс, который : Является ли состязание для.
Теперь наш Шаблон Блок завершен и выглядит следующим образом.
Доработать наш Карта Компонент, нам просто нужно добавить подготовленные стиль в нижней части файла.
Оригинал: “https://www.freecodecamp.org/news/how-to-design-and-build-a-carousel-feature-in-vuejs-125f690a3a9e/”