vue swiper 初始化巨坑解決方案

vue swiper 初始化巨坑解決方案

 

1延遲修改屬性初始化方案

<swiper class="swiper" :options="swiperOptionTop" ref="swiper1">
    <swiper-slide class="slide-1" v-for='item in imgList'>
        <img :src='item' />
    </swiper-slide>
</swiper>
export default {
    data() {
        return {
           swiperOptionTop: {
                init:false,/*開始不初始化*/
                slidesPerView: 3,
                spaceBetween: 10,
            }
        }
    },
    mounted(){
        this.$refs.swiper1.$swiper.init();/*需要的時候初始化*/
    }
}

2 v-if控制 這個不多說了

3 修改key

<swiper class="swiper" :options="swiperOptionTop" ref="swiper1" :key='swiperKey'>
    <swiper-slide class="slide-1" v-for='item in imgList'>
        <img :src='item' />
    </swiper-slide>
</swiper>
export default {
    data() {
        return {
           swiperOptionTop: {
                swiperKey:Math.random().toString(36).substr(2),/*隨機的key*/
                slidesPerView: 3,
                spaceBetween: 10,
            }
        }
    },
    mounted(){
        this.swiperOptionTop.spaceBetween=20;//修改options配置
        this.swiperKey=Math.random().toString(36).substr(2);//修改key，swiper重新渲染。
    }
}

總之 中途不要改屬性 。。。。。。改了就要重新渲染swiper組件