Vue swiper点击按钮轮播失效,按F12弹出编辑器后才有效
我们在使用swiper的时候经常会跟其他框架一起使用,比如Vant,iview。有时候回遇到跟其他框架中的组件一起使用时,swiper的点击效果,轮播都不能正常使用,但是仅仅使用swiper时却能正常轮播。有时候会报无法找到$swiper的错误,就拿swiper中的thumb功能和iview中的Modal组件来说
swiper中的thumb功能和iview中的Modal组件
swiper中的thumb在vue中使用的基础代码
<template>
<div class="thumb-example">
<!-- swiper1 -->
<swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
<swiper-slide class="slide-1"></swiper-slide>
<swiper-slide class="slide-2"></swiper-slide>
<swiper-slide class="slide-3"></swiper-slide>
<swiper-slide class="slide-4"></swiper-slide>
<swiper-slide class="slide-5"></swiper-slide>
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
</swiper>
<!-- swiper2 Thumbs -->
<swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
<swiper-slide class="slide-1"></swiper-slide>
<swiper-slide class="slide-2"></swiper-slide>
<swiper-slide class="slide-3"></swiper-slide>
<swiper-slide class="slide-4"></swiper-slide>
<swiper-slide class="slide-5"></swiper-slide>
</swiper>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
name: 'swiper-example-thumbs-gallery',
title: 'Thumbs gallery with Two-way control',
components: {
Swiper,
SwiperSlide
},
data() {
return {
swiperOptionTop: {
loop: true,
loopedSlides: 5, // looped slides should be the same
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
},
swiperOptionThumbs: {
loop: true,
loopedSlides: 5, // looped slides should be the same
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true
}
}
},
mounted() {
this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.$swiper
const swiperThumbs = this.$refs.swiperThumbs.$swiper
swiperTop.controller.control = swiperThumbs
swiperThumbs.controller.control = swiperTop
})
}
}
</script>
<style lang="scss" scoped>
.thumb-example {
height: 480px;
background-color: $black;
}
.swiper {
.swiper-slide {
background-size: cover;
background-position: center;
&.slide-1 {
background-image:url('/images/example/1.jpg');
}
&.slide-2 {
background-image:url('/images/example/2.jpg');
}
&.slide-3 {
background-image:url('/images/example/4.jpg');
}
&.slide-4 {
background-image:url('/images/example/5.jpg');
}
&.slide-5 {
background-image:url('/images/example/6.jpg');
}
}
&.gallery-top {
height: 80%;
width: 100%;
}
&.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: $gap 0;
}
&.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
&.gallery-thumbs .swiper-slide-active {
opacity: 1;
}
}
</style>
如果只是使用swiper是可以正常使用的,但是如果配合其他框架的组件,你会发现轮播会无效,但是你一按F12或者改变运行时的状态,轮播又有用了。
解决方案
只要给每个swiper添加两个属性就行了 observer: true, 修改swiper自己或子元素时,自动初始化swiper; observeParents: true ,修改swiper的父元素时,自动初始化swiper。
<template>
<div class="thumb-example">
<!-- swiper1 -->
<swiper class="swiper gallery-top" :options="swiperOptionTop" ref="swiperTop">
<swiper-slide class="slide-1"></swiper-slide>
<swiper-slide class="slide-2"></swiper-slide>
<swiper-slide class="slide-3"></swiper-slide>
<swiper-slide class="slide-4"></swiper-slide>
<swiper-slide class="slide-5"></swiper-slide>
<div class="swiper-button-next swiper-button-white" slot="button-next"></div>
<div class="swiper-button-prev swiper-button-white" slot="button-prev"></div>
</swiper>
<!-- swiper2 Thumbs -->
<swiper class="swiper gallery-thumbs" :options="swiperOptionThumbs" ref="swiperThumbs">
<swiper-slide class="slide-1"></swiper-slide>
<swiper-slide class="slide-2"></swiper-slide>
<swiper-slide class="slide-3"></swiper-slide>
<swiper-slide class="slide-4"></swiper-slide>
<swiper-slide class="slide-5"></swiper-slide>
</swiper>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
export default {
name: 'swiper-example-thumbs-gallery',
title: 'Thumbs gallery with Two-way control',
components: {
Swiper,
SwiperSlide
},
data() {
return {
swiperOptionTop: {
loop: true,
loopedSlides: 5, // looped slides should be the same
spaceBetween: 10,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true //修改swiper的父元素时,自动初始化swiper
},
swiperOptionThumbs: {
loop: true,
loopedSlides: 5, // looped slides should be the same
spaceBetween: 10,
centeredSlides: true,
slidesPerView: 'auto',
touchRatio: 0.2,
slideToClickedSlide: true,
observer: true, //修改swiper自己或子元素时,自动初始化swiper
observeParents: true //修改swiper的父元素时,自动初始化swiper
}
}
},
mounted() {
this.$nextTick(() => {
const swiperTop = this.$refs.swiperTop.$swiper
const swiperThumbs = this.$refs.swiperThumbs.$swiper
swiperTop.controller.control = swiperThumbs
swiperThumbs.controller.control = swiperTop
})
}
}
</script>
<style lang="scss" scoped>
.thumb-example {
height: 480px;
background-color: $black;
}
.swiper {
.swiper-slide {
background-size: cover;
background-position: center;
&.slide-1 {
background-image:url('/images/example/1.jpg');
}
&.slide-2 {
background-image:url('/images/example/2.jpg');
}
&.slide-3 {
background-image:url('/images/example/4.jpg');
}
&.slide-4 {
background-image:url('/images/example/5.jpg');
}
&.slide-5 {
background-image:url('/images/example/6.jpg');
}
}
&.gallery-top {
height: 80%;
width: 100%;
}
&.gallery-thumbs {
height: 20%;
box-sizing: border-box;
padding: $gap 0;
}
&.gallery-thumbs .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
&.gallery-thumbs .swiper-slide-active {
opacity: 1;
}
}
</style>