swiper在Vue中出现问题

swiper在Vue中出现问题

写在前面：这里遇到的问题是我自己遇到的，不代表有广泛性，所以，如果不是你的问题的解决之道，请勿喷！

正文：

问题说明：

Vue项目中用了一个swiper的轮播，动态加载后台返回的数据，加载页面正常，向左滑动也是正常，向右滑动整个页面就飞没有了。

//这是页面里面的swiper中内容
 <div class="swiper-slide" 
 v-for="item in topslide" 
 :key="item.id">
 	<img :src="item.img" />
 </div>

Vue中代码：

mounted: function () {
//没有修改之前的写法*********************************
this.swiperBanner();
//************************************************
//这里是重点，改完之后的*********************************
 //挂载window.onresize事件
 window.onresize = () => {
     this.swiperBanner();
 };
 //********************************************
},
methods:{
 swiperBanner() {
     new Swiper('#certify .swiper-container', {
         watchSlidesProgress: true,
         slidesPerView: 'auto',
         centeredSlides: true,
         loop: true,
         autoplay: {
             delay: 2500,//时间 毫秒
             disableOnInteraction: false,//用户操作之后是否停止自动轮播默认true 
         },
         loopedSlides: 3,
         autoplay: false,
         on: {
             progress: function (progress) {
                 for (i = 0; i < this.slides.length; i++) {
                     var slide = this.slides.eq(i);
                     var slideProgress = this.slides[i].progress;
                     modify = 1;
                     if (Math.abs(slideProgress) > 1) {
                         modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                     }
                     translate = slideProgress * modify * 926 + 'px';
                     scale = 1 - Math.abs(slideProgress) / 3;
                     zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                     slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                     slide.css('zIndex', zIndex);
                     slide.css('opacity', 1);
                     if (Math.abs(slideProgress) > 1) {
                         slide.css('opacity', 0);
                     }
                 }
             },
             setTransition: function (transition) {
                 for (var i = 0; i < this.slides.length; i++) {
                     var slide = this.slides.eq(i)
                     slide.transition(transition);
                 }
             }
         }

     })
 },
}

说明：动态加载的swiper数据，初始化，在页面发生onresize的时候再在初始化。这样我的问题就解决了，不知道会不会是各位客官的问题解决之道，有新的问题，或者解决方法可以评论留言；
这里贴一个，我解决问题参考的网址：

当然网上也有很多广泛性的问题和解决方法：这里一并贴出来

//最多的情况就是，在初始化swiper的时候带上这2个参数属性，解决滑动问题，个人客官自己根据情况选择
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true//修改swiper的父元素时，自动初始化swiper

–end –