Карусель изображений — это функция, которую часто необходимо реализовать во внешнем интерфейсе. Недавно я изучил Vue.js и инкапсулировал его для Swiper, чтобы реализовать простой компонент карусели изображений.
1. Свайпер
Прежде чем внедрять инкапсуляцию, давайте представим Swiper.
-
Swiper — это подключаемый модуль с эффектом скольжения, созданный на чистом Javascript и предназначенный для мобильных терминалов, таких как мобильные телефоны и планшетные компьютеры.
-
Swiper может реализовывать общие эффекты, такие как карта фокусировки сенсорного экрана, переключение вкладок сенсорного экрана и переключение нескольких изображений сенсорного экрана.
-
Swiper с открытым исходным кодом, бесплатный, стабильный, простой в использовании и мощный.Это важный выбор для создания веб-сайтов для мобильных терминалов.
Swiper имеет широкий спектр сценариев применения, и эффект от реализации очень хороший.Следующий фактический случай является типичным сценарием применения Swiper.
2. Компоненты Vue
Компоненты Vue предназначены для совместного использования для улучшения ремонтопригодности и возможности повторного использования. Карусель изображений подходит для использования компонентов для завершения, поэтому, прежде чем вводить конкретную реализацию, сначала познакомьтесь с компонентами Vue и взаимодействием компонентов.
Наиболее распространенной формой компонентов Vue является формирование отношений родитель-потомок: компонент A использует компонент B в своем шаблоне.
Они должны взаимодействовать друг с другом: родительский компонент может отправлять данные дочернему компоненту, а дочерний компонент может информировать родительский компонент о том, что происходит внутри него. Однако также важно максимально разделить родительские и дочерние компоненты с помощью четко определенного интерфейса. Это гарантирует, что код каждого компонента может быть написан и понят в относительно изолированной среде, тем самым улучшая его ремонтопригодность и возможность повторного использования.
В Vue отношения между родительскими и дочерними компонентами можно резюмировать, когда реквизиты передаются вниз, а события передаются вверх. Родительский компонент отправляет данные дочернему компоненту через реквизиты, а дочерний компонент отправляет сообщения родительскому компоненту через события.
3. Реализация инкапсуляции
1. Представьте Swiper
Во-первых, необходимо установить Swiper.
npm install --save swiper
Затем необходимо сослаться на два файла.
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
2. HTML-код
Установите html-макет карусели в шаблоне.
<template>
<div class="swiper-container" :class="swipeid">
<div class="swiper-wrapper">
<!-- 存放具体的轮播内容 -->
<slot name ="swiper-con"></slot>
</div>
<!-- 分页器 -->
<div :class="{'swiper-pagination':pagination}"></div>
</div>
</template>
Именованный слот используется для улучшения разделения, поэтому при использовании родительского компонента можно установить разное содержимое карусели в соответствии с различными ситуациями.
Кроме того, необходимо установить пейджер, то есть индикатор страницы в карусели изображений, например, маленькую точку, или цифровой индикатор.
3. Инициализируйте Swiper
Поскольку Swiper инкапсулирован для реализации карты карусели, а Swiper был установлен ранее, его необходимо инициализировать и использовать сейчас.
Перед инициализацией, в соответствии с пониманием использования Swiper, сначала определите атрибутивную информацию, необходимую карусельному компоненту, а затем передайте ее инкапсулированному компоненту Swiper через родительский компонент.
Здесь нужен реквизит.
props: {
swipeid: {
type: String,
default: ""
},
effect: {
type: String,
default: "slide"
},
loop: {
type: Boolean,
default: false
},
direction: {
type: String,
default: "horizontal"
},
pagination: {
type: Boolean,
default: true
},
paginationType: {
type: String,
default: "bullets"
},
autoPlay: {
type: Number,
default: 3000
}
}
Значение каждого атрибута поясняется ниже.
| Атрибуты | имея в виду |
|---|---|
| swiped | Имя класса атрибута класса контейнера карусели. |
| effect | Эффект переключения картинки, по умолчанию "слайд", а также можно установить "затухание", "куб", "покрытие", "переворот", подробнее см.effect. |
| loop | Установите значение true, чтобы включить режим цикла. Циклический режим: несколько изображений будут скопированы до и после исходного изображения и при необходимости переключены, чтобы Swiper выглядел зацикленным, см. подробности.loop. |
| direction | Направление скольжения изображения можно задать по горизонтали или по вертикали.Подробнее см.direction. |
| pagination | Используйте пагинацию, см. подробностиpagination. |
| paginationType | Тип стиля пейджера, можно установить «пули», «фракция», «прогрессбар», «пользовательский», подробности см.type. |
| autoPlay | Установите значение true, чтобы включить автоматическое переключение и использовать параметры переключения по умолчанию, см. подробностиautoplay. |
Поняв значение каждого из вышеперечисленных свойств, вы можете инициализировать Swiper и установить определенные свойства.
При инициализации Swiper вам необходимо передать два параметра.
- Имя класса карусельного контейнера
- Объект, представляющий подробную функциональность компонента карусели изображений.
var that = this;
this.dom = new Swiper("." + that.swipeid, {
//循环
loop: that.loop,
//分页器
pagination: {
el: ".swiper-pagination",
bulletClass : 'swiper-pagination-bullet',
},
//分页类型
paginationType: that.paginationType,
//自动播放
autoPlay: that.autoPlay,
//方向
direction: that.direction,
//特效
effect: that.effect,
//用户操作swiper之后，不禁止autoplay
disableOnInteraction: false,
//修改swiper自己或子元素时，自动初始化swiper
observer: true,
//修改swiper的父元素时，自动初始化swiper
observeParents: true
});
}
В-четвертых, пользовательский эффект карусели
После вышеперечисленных действий карусель упаковывается. Мы можем настроить эффект карусели, который мы хотим. Давайте возьмем API Zhihu в качестве примера реализации поворота изображения.
1. HTML-код
<m-swipe swipeid="swipe" ref="swiper" :autoPlay="3000" effect="slide">
<div v-for="top in tops" :key="top.id" class="swiper-slide" slot="swiper-con" >
<img :src="top.image">
<h3>{{top.title}}</h3>
</div>
</m-swipe>
Прежде всего, нам нужно обратиться к зарегистрированным компонентам, о которых здесь подробно писать не будем.
вm-swipeЭто компонент карусели изображений, реализованный ранее, а его подкомпоненты — содержимое карусели, вставленное через именованный слот.
2. CSS-код
.swiper-container {
width: 100%;
}
.swiper-slide {
height: 8rem;
overflow: hidden;
position: relative;
}
.swiper-slide {
div {
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.4;
position: absolute;
background-color: @blue;
}
img {
top: 50%;
position: relative;
transform: translate(0, -50%);
}
h3 {
width: 70%;
color: #fff;
margin: 0;
font-size: 0.5rem;
line-height: 1rem;
right: 5%;
bottom: 2.6rem;
text-align: right;
position: absolute;
text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
&:before {
content: "";
width: 3rem;
bottom: -0.6rem;
right: 0;
display: block;
position: absolute;
border: 2px solid @yellow;
}
}
}
.swiper-pagination-bullet-active {
background: #fff;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 1rem;
width: 95%;
text-align: right;
}
вswiper-pagination-bullet-activeИмя класса, представляющее точку, указанную в данный момент в пейджере.swiper-pagination-bulletsПредставляет имя класса пейджера. Подробнее см.Имя класса элемента внутри пейджера.
Код об отображении данных сетевого запроса не будет опубликован, а адрес исходного кода указан ниже.
3. Эффекты
Это всего лишь простой эффект инкапсуляции. Если вы хотите добиться большего количества эффектов, вы можете добиться этого с помощью дополнительных функций, предоставляемых в Swiper.
Адрес на гитхабе: Карусель изображений