Vue中引入swiper轮播插件,数据渲染时,发生不滑动的问题！

Vue中引入swiper轮播插件,数据渲染时,发生不滑动的问题！

写在前面：这个问题不难，但是的确也挺让人想不到，如何处理，这里记录下解决办法

<div id="certify">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in topslide" :key="item.id"><img :src="item.img" />
            </div>
        </div>
    </div>
    <!-- <div class="swiper-pagination"></div> -->
    <!-- <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> -->
</div>

这里是Vue的结构
mounted: function () {
    this.swiperBanner()//这里是个重点，标记下
},
methods: {
	swiperBanner() {//定义一个基础的方法来初始化swiper
		watchSlidesProgress: true,
        slidesPerView: 'auto',
        centeredSlides: true,
        loop: true,
        autoplay: {
            delay: 2500,//时间 毫秒
            disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true 
        },
        loopedSlides: 3,
        autoplay: true,
        // navigation: {
        //     nextEl: '.swiper-button-next',
        //     prevEl: '.swiper-button-prev',
        // },
        // pagination: {
        // 	el: '.swiper-pagination',
        // 	//clickable :true,
        // },
	}
},
http_request(){//这里是你请求的后台数据的地方
	//这里用ajax axios fetch 看你心情
	var _this=this;
	$.ajax('some-url', {
	  success: (data) => { 
		//成功的时候,初始化一下swiper
		 _this.swiperBanner()
	},
	  error: (err) => { /* do something when an error happens */}
	});
}

总结：就是mounted中，还有就是成功请求的时候，要初始化下swiper，当然了，也许你的情况和我不同，但是基本上这样，我是解决了问题的 ，如果有什么错误，欢迎小伙伴指正，谢谢

-end-