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重新渲染。
    }
}

总之 重新渲染

标签：初始化,vue,巨坑,spaceBetween,修改,key,swiper,swiperOptionTop
来源： https://www.cnblogs.com/newmiracle/p/15958988.html