swiper动态渲染数据时，如何重新实例化？

孤独与酒伴我同行 2020-05-11 03:27:50

在代码中，对于new一个新的swiper来说，可以正常使用，但是我们肯定多出用的是动态数据。
1.如果直接从新调用实例化函数，会导致轮播图顺序乱掉。
2.如果使用swiper.removeAllSlides()；会导致页面出现白框（重新加载一次），该方法使用次数多的话，我的页面就会出现卡死，或者说停止自动轮播。
3.官方文档中好像有说这个更新实例化的问题，不过我是没找到这个问题所在，就是用不了。
4.我的loop：true。有时候会失效（原生Js），这东西是个概率性问题（头疼的很）

实例化代码：
trList = ['leftUp', 'moveRight', 'moveDown', 'centerBig', 'rightDownBig'];
swiper = new Swiper('.swiper-container', {
loop: true,
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
speed: 3000,
autoplay: {
delay: 60000,
stopOnLastSlide: false,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
disabledClass: 'my-button-disabled',
},
// autoplayDisableOnInteraction: true,
// effect: JSON_type_effect[Math.floor((Math.random() * JSON_type_effect.length))],
effect: 'slide',
// pagination: {
// el: '.swiper-pagination',
// },
// preloadImages:true,
// updateOnImagesReady : true,
paginationClickable: true,
preventInteractionOnTransition: true,
onSlideChangeStart: function (swiper) {
nextSlide = swiper.slides.eq(swiper.activeIndex);
nextSlide.addClass(trList[Math.floor(Math.random() * 5)]);
},
onSlideChangeEnd: function (swiper) {
swiper.update(); //更新Swiper，这个方法包含了updateContainerSize，updateSlidesSize，updateProgress，updatePagination，updateClasses方法。也就是数据改变是重新初始化一次swiper；
swiper.startAutoplay(); //重新开始自动切换；
swiper.reLoop(); //重新对需要循环的slide个数进行计算，当你改变了slidesPerView参数时需要用到，需要自动轮播的时候必须要加上；
},
onInit: function (swiper) {
// swiper.swipeNext()//就是这里！！！！每次init，重绘的时候都会跳转到下一页
}
// onSlideChangeEnd: function (swiper) {
// prevSlide = swiper.slides[swiper.previousIndex];
// prevSlide.className = "swiper-slide";
// },
});

说句实话，我甚至有时候会还以我的网络是不是不行！

我清除代码：先执行一次swiper.removeAllSlides()；然后清空我swiper-wrapper里的所有东西，再从服务器上拿我的新数据，再次重新去渲染swiper-wrapper内的盒子，完了之后重新实例化一次swiper，就会出现我上述问题！有没有大佬救救我啊，有点理解不了。是不是我渲染逻辑上有问题？

...全文