swiper动态加载数据时,图片滑动滚动无效

swiper 动态获取图片时,图片滚动滑动无效

问题描述: 就是在动态获取图片后,把获取到的图片append到父级元素中时发现,没法滚动了.

方案1:
可以在添加父级元素后初始化swiper; 下面是我的代码片段

res.data.forEach(swiper => {
   swiperDom = `<div class="swiper-slide swiper-slide-center none-effect" data-swiperId="${swiper.id}"><img src="${swiper.pic}" /></div>`;
   $('.swiper-wrapper').eq(0).append(swiperDom);
	   const swiper_con = new Swiper('.swiper-container',{
            slidesPerView: 2,
            spaceBetween: 80,
            autoplayDisableOnInteraction: true, //触碰图片后时候轮播
            loop: true,
            centeredSlides: true,
            paginationClickable: true,
        });
});

方案2:
直接在初始化swiper时添加两行代码
observer:true,//将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新。
observeParents:true//修改swiper的父元素时，自动初始化swiper

 const swiper_con = new Swiper('.swiper-container',{
            slidesPerView: 2,
            spaceBetween: 80,
            autoplayDisableOnInteraction: true, //触碰图片后时候轮播
            loop: true,
            centeredSlides: true,
            paginationClickable: true,
            observer:true,//修改swiper自己或子元素时，自动初始化swiper
            observeParents:true//修改swiper的父元素时，自动初始化swiper
        });

这就是解决了动态添加swiper dom 后滚动无效的问题
swiper官网地址,就是abserver 这节: https://www.swiper.com.cn/api/observer/219.html