今天写H5,遇到一个需求,就是两个swiper
的联动,设计稿长这样
第一眼看到这个需求,反应就是两个swiper
联动,然后居中,默认展示第二个,索性直接贴下代码,纪录一下实现的核心代码
<!-- 顶部圆图标 -->
<div class="list-container">
<swiper
class="service-advantage"
ref="carouselSwipers"
:options="swiperOptionsOne"
>
<swiper-slide
class="swiper-slide-top"
v-for="(item, index) in serviceAdvantageData"
:key="`item${index}`"
>
<div class="img-icon">
<img :src="item.topIcon" />
</div>
<div class="img-text">{{ item.topTitle }}</div>
<div class="bottom-icons">
<img src="@/assets/images/members/introduce/bottom-icon.png" />
</div>
</swiper-slide>
</swiper>
</div>
<!-- 底部tab -->
<swiper
class="service-advantage01"
ref="carouselSwiper"
:options="swiperOptions"
>
<swiper-slide
class="swiper-slide-bottom"
v-for="(item, index) in serviceAdvantageData"
:key="`item${index}`"
>
<div class="left-icon">
<div class="left-icon-img">0{{ index + 1 }}</div>
<div class="title-text">{{ item.title }}</div>
</div>
<div class="describe-center">{{ item.describe }}</div>
</swiper-slide>
</swiper>
data() {
return {
swiperOptions: {
slidesPerView: "auto", //设置slider容器能够同时显示的slides数量,可以是小数,设置为2时,如图所示,设置为3则会出现三张完整的active slide,如API的例子,即设置为偶数时会自动使两边的缩进,类似遮盖一半的效果
spaceBetween: 0,
initialSlide: 1, // 默认进入当前弹窗展示第二屏
centeredSlides: true, //设定为true时,active slide会居中,而不是默认状态下的居左
loop: false,
slideToClickedSlide: true, //true:点击slide会过渡到这个slide,默认false
pagination: {
el: ".swiper-pagination",
clickable: true
},
on: {
transitionEnd: () => {
this.$nextTick(() => {
const index = this.$refs.carouselSwiper.swiper.activeIndex;
this.$refs.carouselSwipers.swiper.slideToLoop(index, 300, false);
});
}
}
},
swiperOptionsOne: {
slidesPerView: "auto",
spaceBetween: 0,
initialSlide: 1, // 默认进入当前弹窗展示第二屏
centeredSlides: true,
loop: false,
slideToClickedSlide: true,
pagination: {
el: ".swiper-pagination",
clickable: true
},
on: {
transitionEnd: () => {
this.$nextTick(() => {
const index = this.$refs.carouselSwipers.swiper.activeIndex;
this.$refs.carouselSwiper.swiper.slideToLoop(index, 300, false);
});
}
}
}
}
}